CODEWITHSUNDEEP
htmlcss
akcasoy
akcasoy

Reputation: 7215

How to make a fixed positioned div use the rest width of its parent?

I have 2 columns in a container (whose width dynamically changes in our situation). The left-column (green) has always a fix width of i.e. 100px, and flows with the document as usual. The right column (blue) has a position: fixed, because i have a JS code, which sets the top&bottom positions of this right column dependent on the scroll position.

I want that my fixed positioned right column does not expand its parent on the X axis, but just use the space left from the left-column. Is it possible?

Now i have width:inherit, which actually makes the whole right-column having the same width as its parent. But i have to substract the width of the left-column from this width, so that the right-column does not expand the container.

Here is a fiddle for a simplified version of my problem:

http://jsfiddle.net/gj4a5hde/

enter image description here

.container {
  margin-top: 30px;
  height: 1400px;
  width: 600px;
  background-color: lightgray;
  border: 2px solid black;
}

.left-column {
  height: 1200px;
  width: 100px;
  background-color: green;
}

.right-column {
  position: fixed;
  top: 50px;
  margin-left: 110px; /* always fix, since the width of the left-column does not change */
  height: 200px;
  width: inherit;
  max-width: inherit;
  background-color: blue;
}
<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
</div>

Upvotes: 2

Views: 942

Answers (1)

disinfor
disinfor

Reputation: 11533

Set the parent .container to have transform: translate(0,0). This will make the fixed element "fixed" to the parent instead of the viewport. Then use calc(100% - 110px) to set the width of your fixed element. That will take the margin into account and remove it from the overall width of the fixed element.

You will need to adjust the top value to what you want.

.container {
  margin-top: 30px;
  height: 1400px;
  width: 600px;
  background-color: lightgray;
  border: 2px solid black;
  transform: translate(0,0);
}

.left-column {
  height: 1200px;
  width: 100px;
  background-color: green;
}

.right-column {
  position: fixed;
  top: 50px;
  margin-left: 110px; /* always fix, since the width of the left-column does not change */
  height: 200px;
  width: calc(100% - 110px);
  max-width: inherit;
  background-color: blue;
}
<div class="container">
  <div class="left-column"></div>
  <div class="right-column"></div>
</div>

Upvotes: 1

Related Questions