I have a layout with a left vertical nav and a main content area. The main content area has some info floated right, and its contents may be wider than the browser window. This works how I want with Firefox/Chrome/IE8, but with IE7, the wide content gets pushed down below the nav menu.
Problem demonstrated here: http://jsfiddle.net/UX2ac/
With the test page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.nav {
float: left;
width: 5em;
background: lightgreen;
}
.content {
background: lightyellow;
margin-left: 5em;
}
.extraInfo {
background: lightblue;
float: right;
}
</style>
</head>
<body>
<div class="nav">
left<br/>
nav<br/>
menu<br/>
items
</div>
<div class="content">
<div class="extraInfo">
Right info!
</div>
<p>Page Desc</p>
<!-- <h3>Content</h3> -->
<div style="white-space: nowrap">
stuff stuff stuff stuff stuff stuff stuff stuff stuff
</div>
</div>
</body>
</html>
This renders correctly in IE8 as:
But in IE7, it shows as:
I know that I could get “side by side” divs to work with display: inline-block and white-space: nowrap in a parent, but then the content div’s width would expand to include the full size of its content, pushing the right extraInfo div off the screen. Same thing if I replaced nav & content with a 2-cell table.
How I can get IE7 to render this the same as everything else?
Add
"display: inline-block;"to your content element’s style and it will force IE7 to render the same as other browsers.Here is an updated jsfiddle.