Width fixed div element same as the parent's

[TimoKleinhout]

Hello,

I’ve a question, I’d like to have a div’s position fixed after scrolling. But when I change the position to “fixed” the div goes out of it’s container. I don’t know what I’m doing wrong. Can you help me?

Codepen: http://codepen.io/TimoKleinhout/pen/VKvrwO

Thank you!

CSS:

.container { position: relative; background-color: #71E764; width: 100%; max-width: 50rem; height: 1000px; }

.left { position: relative; float: left; width: 75%; }

.right { position: relative; display: inline-block; float: left; width: 25%; }
.right .sticky { position: fixed; display: inline-block; padding-left: 20px; width: inherit; max-width: inherit; }
.right .sticky p { color: red; }

.clear { clear: both; }

HTML:

<div class="container">
  <div class="left">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="right">
    <div class="sticky">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <div class="clear"></div>
</div>

[Paulie_D]

That’s what fixed positioning does.

It removes the element from the normal flow of the page and positions it in relation to the viewport.

Where do you want it stuck to?

[TimoKleinhout]

Okay, is there a way I can fix this? So that it’s the same width as my container/parent div?

[Paulie_D]

I’m not clear on what it is you are trying to do.

[TimoKleinhout]

Here’s my example, I want the div inside the container.
http://codepen.io/TimoKleinhout/pen/VKvrwO

[Paulie_D]

That’s just a matter of a quick reset

But that won’t solve your positioning problems

I’m still not clear on what effect you are tryng to achieve here.

[TimoKleinhout]

Now you deleted the fixed position. That is necessary.

[Paulie_D]

…and as I said, until you explain what it is you are trying to do it’s hard to help.

Fixed positioning removes the element from the normal flow of the page and positions it in relation to the viewport….not the parent div.

[TimoKleinhout]

This (http://goo.gl/sJhsTn) is where I need it. As you see when you scroll, the right div gets a class .stick that has a position: fixed.

Is it now clear to you what I need? Thanks

[Paulie_D]

Once you apply position fixed…the element no longer has any relation to the parent element.

That applies to width and everything else.

You might try position:sticky instead

http://codepen.io/Paulie-D/pen/pEgaWA

[Paulie_D]

I think I’ve cracked this.

You have a handy max-width in play.

We can use that in our styles for .right using calc and then your width:inherit will work…I think…if we include the max-width:inherit

.right {
  position: relative;
  float: left;
  width: 25%;
  max-width: calc(50rem / 4)
}

I think we get what you are after.

http://codepen.io/Paulie-D/pen/gwPZgW

[Author]

Posts