50

Let's say I have two divs, one inside the other, like so:

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="width:100%">
      </div>
    </div>
  </body>
</html>

Right now, the inner div has a width of 100% of 50% of the screen size, or 50% of the screen size. If I were to change the inner div to position absolute, like this:

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="position:absolute;width:100%">
      </div>
    </div>
  </body>
</html>

In this case the inner div takes up 100% of the screen space, because its position is set to absolute.

My question is this: Is there any way to maintain relative width of the inner div while its position is set to absolute?

Ethan Neidhart
  • 75
  • 11
Charles
  • 4,034
  • 9
  • 36
  • 76

2 Answers2

87

Add position:relative to your outer div.

update: It works because positions in position: absolute are relative to the first parent that has some positioning (other than static). In this case there was no such container, so it uses the page.

Mark
  • 15,245
  • 6
  • 95
  • 113
Bror
  • 1,255
  • 9
  • 9
  • 3
    Thanks for the help! This was annoying me for about an hour. I'm glad the solution is so simple :) – Charles Jan 14 '13 at 21:43
  • 5
    OHHH AHHH!!! I spent the last 5 hours trying to fix this damn site I've been working on. Thank you so much for this. Can you explain why this works? – Lebowski156 Apr 07 '13 at 07:22
  • If your outer div is an `` and you want to layer text on top of it, you will need to put another outer `
    ` like this and use z-indexing instead with both absolute: `
    This is my Svg label!
    ` I had this problem, and this solution worked for me! Sadly, ``'s can't really have children.
     – Rock Lee Mar 07 '19 at 01:38
8

Yes. Set outer to position: relative.

http://jsfiddle.net/57673/

.outer
{
  width: 50%;
  height: 200px;
  position: relative;
  border: 1px solid red;
}

.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  border: 1px solid blue;
}
Eli Gassert
  • 9,338
  • 3
  • 24
  • 37