CODEWITHSUNDEEP
htmlcss
user1637281
user1637281

Reputation:

Why does positioning effect div width?

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

Upvotes: 1

Views: 181

Answers (7)

Alohci
Alohci

Reputation: 82986

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

Upvotes: 0

Huangism
Huangism

Reputation: 16438

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;

Upvotes: 0

Guffa
Guffa

Reputation: 700342

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.

Upvotes: 1

Cody Guldner
Cody Guldner

Reputation: 2896

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

Upvotes: 0

user2544708
user2544708

Reputation: 93

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.

Upvotes: 1

Fenton
Fenton

Reputation: 250922

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

Upvotes: 1

Jean-Paul
Jean-Paul

Reputation: 21160

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.

Upvotes: 1

Related Questions