Question

When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it ‘autosized’ for width.

Other browsers display it fine, but not IE. How do I fix this?

<div style='position:absolute;top:50px;left:50px;background:green;'>  <div>   <div>test</div>   <div style='height: 20px;'>this makes it 100% width in IE.  why?</div>  </div> </div> 

Thanks!

Answer 1

Here’s something that may work for you. It’s a little hacky, but if you’re trying to find a good width for some text, this is the only way besides javascript that I know of. We’re basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.

<div style='position:absolute;top:50px;left:50px;background:green;width:0px'>  <div>   <div>test</div>   <div style='height:50px; white-space:nowrap'>This is normally sized in IE6</div>  </div> </div> 

On second thought, don’t check out the link. It’s old and doesn’t work as advertised.

Old answer:

http://snippets.dzone.com/posts/show/216

I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven’t specified any container size for this div, it expands to fill the whole page.

I find it odd that Firefox doesn’t expand the div… I’m not sure which of them actually has it ‘right’.