Is there any way for "position:absolute" div to retain relative width?

Question

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?

score 99 · Accepted Answer · edited Aug 22 '14 at 02:33

99

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.

edited Aug 22 '14 at 02:33

Mark

18,730
7
107
130

answered Jan 14 '13 at 21:36

Bror

1,395
9
9

4

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 `
` 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, `
– Rock Lee Mar 07 '19 at 01:38

score 9 · Answer 2 · answered Jan 14 '13 at 21:36

9

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;
}

answered Jan 14 '13 at 21:36

Eli Gassert

9,745
3
30
39

score 5 · Answer 3 · answered Oct 16 '21 at 12:18

5

I had an element that had to be position:absolute in a project and I found that setting width to max-content fixed that for me.
It seems to be well supported across modern browsers. Check this link for more info: Mozilla.org (max-content) .

answered Oct 16 '21 at 12:18

Giovanni Di Toro

797
1
14
34

You just saved me like 4 hours of debugging, thank you! – alex067 Nov 06 '21 at 02:29

Is there any way for "position:absolute" div to retain relative width?

3 Answers3

Linked