I am in need of a css layout for fixed size sidebar and a fluid content area. Problem is, most css layouts for this format use float to position the sidebar. Because of this, I can not use a clear: both inside the content area.
Check out the html attached. Content area skips to bottom of nav content at float.
I need a solution for this type of a css layout which still allows me to use floats/clear inside the content area.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
#nav {
float: left;
width: 160px;
}
#content {
margin: 0 0 0 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div id="nav">
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
This is the nav content<br/>
</div>
<div id="content">
This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
<div style="padding: 10px; float: left; width: 100px; background-color: yellow;">Left</div>
<div style="padding: 10px; float: right; width: 100px; background-color: orange;">Right</div>
<div style="clear: both;"> </div>
(This shouldn't be way down here) This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
This is the main content<br/>
</div>
</div>
</body>
</html>