Why does positioning effect div width?

Question

I was fiddling with my web-app to try and get a div to wrap around some p elements. The structure looks like this, i.e. pseudo-code ...

<div id='outer'>
  <p></p>
  <p></p>
  <p></p>
</div>

What I found is that if I set the outer div to

position:absolute;

instead of

position:relative

that the div would correctly wrap around only the p elements.

Otherwise it would extend all the way to the very right of the page, and I had previously had to set the width manually.

What is governing this behavior?

Also, the p tags use

display:inline

and the containing div just uses the default display.

This CSS below works well in my app.

// outer div

#mi_control {
    position: absolute;
    left: 580px;
    top: 660px;
    width: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

// p elements

.menu_bottom {
    margin-left: 18px;
    display: inline;
}

added in css, there is no problem, I'm just asking why things work this way, i.e. what governs the behavior... — , Jul 04 '13 at 20:58
you set the top and left so that's why it is pushed to the bottom right, but it will still wrap around your p tags — Huangism, Jul 04 '13 at 21:02
Duplicate question for - http://stackoverflow.com/questions/5323177/absolute-vs-relative-position-width-height — face, Jul 04 '13 at 21:03

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

This is a common issue..

I quote:

Question: relative div takes 100% width automatically but absolute div only takes content width. why?

Answer: Setting position:absolute removes the element in question from the normal flow of the docment structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.

edited May 23 '17 at 12:11

Community

1
1

answered Jul 04 '13 at 20:59

Jean-Paul

19,910
9
62
88

score 1 · Answer 2 · answered Jul 04 '13 at 20:59

By default, a div element is set to display: block;. Block elements will be 100% of the width of the parent element.

When you set an element to position: absolute; it takes it out of the document flow and the element is no longer sized according to the parent element. It can mess with your layout though.

My recommendation is to set the div element to display: inline-block; - this will make it sized as per its contents, but will not remove it from the flow of the document.

#outer
{
    display: inline-block;
}

score 1 · Answer 3 · answered Jul 04 '13 at 21:00

I don't know exactly what rules governing this behavior but what you observed is the right behavior and is consistent across all browsers. A DIV takes minimum width when its position is set to absolute or fixed; otherwise it takes full available width.

score 1 · Answer 4 · answered Jul 04 '13 at 21:02

The default value for width for a div element is auto.

This means that it will take up the full with of the available space, or more if the contents forces it to. If you use position: absolute however, you take the element out of the document flow. As there is nothing that it can relate to as the full width any more, it will use the width that the contents forces it to use.

score 0 · Answer 5 · answered Jul 04 '13 at 21:02

Once it is set to absolute, it is taken out of the normal flow of content. Absolutely positioned elements always appear in the top left corner, unless otherwise specified. The element will also shrink to be only as big as it has to, because that's how position:absolute works

divs naturally have a width of 100%, so that is why you have to set the width manually. Relatively positioned elements behave almost identically to statically positioned elements. The only difference is how they can be moved

score 0 · Answer 6 · answered Jul 04 '13 at 21:04

0

Not sure what you are seeing but even if your div is positioned absolutely, it will STILL wrap your P tags

http://jsfiddle.net/8MSDH/

you are seeing it at the bottom right because you set your top and left

left: 580px;
top: 660px;

answered Jul 04 '13 at 21:04

Huangism

16,278
7
48
74

score 0 · Accepted Answer · answered Jul 04 '13 at 21:07

0

The behaviour is governed by the spec. Absolute positioned elements have dedicated rules about how widths are calculated: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width and http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width

answered Jul 04 '13 at 21:07

Alohci

78,296
16
112
156

Why does positioning effect div width?

7 Answers7