Forum Moderators: not2easy
header
fixed width LH column ¦ variable width RH column
footer
(See example below).
This layout works fine in Firefox; if the browser is resized below the width of the largest piece of content in the RH column, the window simply scrolls and everything stays in line.
However in IE 6, when the browser size is reduced, the large content jumps down below the LH column.
Can anyone suggest a solution to this problem?
Ken
p.s. I have an alternative design that uses absolute positioning to set the left hand position of the two columns. This keeps everything in line, but it means the footer cannot be floated in underneath!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#header{
background:red;}
#nav{
width:150px;
float:left;
background:blue;
}
#content{
margin:0px 0px 0px 170px;
background:white;
}
#footer{
background:green;
clear:both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="nav">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</div>
<div id="content">
content
<br />
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah
</div>
<div id="footer">footer</div>
</body>
</html>
I take it this only happens with very long words or large images? ~ IE can't handle overflow of elements very well, and this can be more obvious when floats are involved
This post [webmasterworld.com] may contain an answer, but that's only for words (like your example) ...
Suzy
overflow:scroll
