views:

491

answers:

2

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!

A: 

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".

Akrikos
Thank you! Unfortunately I don't have access to the stylesheet. This solution seems a bit hackish, too.
sam
A: 

At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions: 1. Give the containing div (the one with the absolute positioning) a set width. 2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.

Lee Theobald