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 max-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>