I ran this page in FF and NS and it does what it's supposed to. In IE, no way.
The menu and content divs will stay side by side and the text will just extend over the content div. If you resize the browser's window, the menu and content divs will also stay side by side. In IE, the content div gets moved beneath the menu div while extending the text past the content div.
We figured out that adding the div group and setting its width to the sum of menu and content made them both stay side by side in FF and NS. What would make them do the same in IE?
I figure that we need a hack of some sorts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>IE overflow test</title>
<style type="text/css">
body{margin: 0px 0px 0px 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif;}
#page{width: 100%;}
#group{width: 750px;}
#menu{float: left; width: 150px; background: green;}
#content{float: left; width: 600px; background: blue;}
</style>
</head>
<body>
<div id="page">
... other header divs here...
<div id="group">
<div id="menu">
<div class="pad">
Menu
</div>
</div>
<div id="content">
<div class="pad">
Contenta;sdflkas;dlfkjasd;flkjasdf;laskdfj;as dlkfjas;dlfkjasd;flkjasdf;laskjf;asdlkjfasd;lfkjas;dflkj as;dflkjasd;flkjasdf;lkasjd;aslkjfas;ldkfjas;ldfkjas;flkjsazfdgdfdgdhgrugfjgddsafgasdfasdfasfasdfasf ewrgtrtuytiuyouiopjhkfhnbvfsdgfdf wrgsdfsdgfdgwetregsdfgdsfgfsdgsdg
</div>
</div>
</div>
</div>
</body>
</html>works the same in IE as it does in Netscape for me.
It doesn't jump down at all.
The menu and content divs will stay side by side and the text will just extend over the content div. If you resize the browser's window, the menu and content divs will also stay side by side. In IE, the content div gets moved beneath the menu div while extending the text past the content div.
We figured out that adding the div group and setting its width to the sum of menu and content made them both stay side by side in FF and NS. What would make them do the same in IE?
I figure that we need a hack of some sorts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>IE overflow test</title>
<style type="text/css">
body{margin: 0px 0px 0px 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif;}
#page{width: 100%;}
#group{width: 750px;}
#menu{float: left; width: 150px; background: green;}
#content{float: left; width: 600px; background: blue;}
</style>
</head>
<body>
<div id="page">
... other header divs here...
<div id="group">
<div id="menu">
<div class="pad">
Menu
</div>
</div>
<div id="content">
<div class="pad">
Contenta;sdflkas;dlfkjasd;flkjasdf;laskdfj;as dlkfjas;dlfkjasd;flkjasdf;laskjf;asdlkjfasd;lfkjas;dflkj as;dflkjasd;flkjasdf;lkasjd;aslkjfas;ldkfjas;ldfkjas;flkjsazfdgdfdgdhgrugfjgddsafgasdfasdfasfasdfasf ewrgtrtuytiuyouiopjhkfhnbvfsdgfdf wrgsdfsdgfdgwetregsdfgdsfgfsdgsdg
</div>
</div>
</div>
</div>
</body>
</html>works the same in IE as it does in Netscape for me.
It doesn't jump down at all.