In the code below I have 2 divs, each having two nested divs. When the browser window is re-sized under Firefox/IE8 it all works well - The rightmost parent div falls down under the first one.

Under IE6, however (or IE8 with compatibility mode) the child divs in the second div wrap. To make things worse, it happens DESPITE the fact I've set a 'height' to the div.

How do I make IE6 behave like IE8/Firefox in this case? How can I tell the DIVs not to wrap? Note that the text is dynamic so I can't set width to the parent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.parent
{
float: left;
border: solid 1px black;
height: 30px;
white-space: nowrap;
}

.child
{
float: left;
border: solid 1px grey;
width: auto;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div class="parent">
<div class="child">
What is up, guy What is up, guy
</div>
<div class="child">
What is up, guy What is up, guy
</div>
</div>
<div class="parent">
<div class="child">
What is up, guy What is up, guy
</div>
<div class="child">
What is up, guy What is up, guy
</div>
</div>
</form>
</body>
</html> 

3 answers

frujo 38
3
points
This was chosen as the best answer

Here you go:

.child {
    display:inline;
    border: solid 1px grey;
    width: auto;}

Works fine in IE6 and FF3.5

Answered over 5 years ago by frujo
  • Awesome! Thanks a lot! Can you explain why it happens? Vitaly Belman over 5 years ago
  • because the divs are no longer block level elements floated, but they are now inline elements. depending on your objective, this may or may not be a good answer. Tony Crockford over 5 years ago
  • I'm very glad that helped. I think that the root of the problem lies in IE6's "undersanding" of "white-space: nowrap". In IE6's case it works only with inline elements. frujo over 5 years ago
1
point

if you don't define width, then elements default to width:auto, IE wrongly vertically expands a container to contain what's in it so when there's not enough width for the right hand parent to contain the two floated children side by side it drops one underneath and increases the height of the parent.

good browsers respect the height setting as a fixed height and drop the parent underneath.

perhaps you could explain the problem you are trying to solve?

maybe looking at resolution dependant layouts and using Javascript to dynamically set widths would be the answer.

see: http://www.themaninblue.com/writing/perspective/2006/01/19/

Answered over 5 years ago by Tony Crockford
danwellman 5600
0
points

IE6 doesn't understand max-height, which could be part of the problem. Is there a test page we can look at?

Answered over 5 years ago by danwellman
  • Actually using just 'height' doesn't as well (I changed it to 'height' in the code above). It is a bit of a problem for me to set a test page as it is in local intranet site. However, you can paste the code to notepad, save locally as html and open in IE8 with/without compatibility mode to reproduce. Thanks! Vitaly Belman over 5 years ago