Ray Ray - 3 days ago 5
CSS Question

div with unspecified width (absolute positioning)

I've got an absolutely positioned div I'm working with, and I put some text inside of it just to be able to find it on the page, namely:

<div style="position:absolute; top:10px; left:500px; font-size:30px; ">Example Text </div>


The text ends up wrapping, i.e. "Example" and "Text" are on a different line. There are no scroll bars showing in my Firefox browser, in fact it's width is about 1000px. Does one have to set a width on divs? Don't they expand to hold their content?

In case it helps, I included the Firebug CSS output for this element here:

element.style {
font-size: 30px;
left: 500px;
position: absolute;
top: 10px;
}
html * {
margin: 0;
} // main.css (line 1)

Inherited from body:

body {
color: #333333;
font: 11px verdana,arial,helvetica,sans-serif;
}


Thanks

Answer

Block-level elements expand vertically to hold their content, but expand horizontally to fill their container. Since you're using absolute positioning though, the semantics of "filling the container" change a bit.

Normally browsers will attempt to fill the remaining horizontal space of the browser if the width hasn't been specified (or when width is 'auto', the default width), so what you're describing sounds peculiar. It seems most likely that something else is interfering with the element to cause that behavior (e.g., a relatively or absolutely positioned element somewhere in the parent chain).

I would try to debug this by seeing if you can replicate the behavior with a root-level div (if you're not already), to eliminate the chance of parent elements causing issues.

Comments