Forum Moderators: not2easy
In Opera and FF3 it works, but in IE7 when I drag drag the window in and out the right and sometimes left sidebar drop down below the content.
Any ideas why is this happening, and is there a solution?
My css:
* {
margin:0px;
padding:0px;
}
#wrapper {
margin:auto;
max-width:950px;
min-width:744px;
}
#header {
background: #369;
}
#main-body {
float: left;
width: 75%;
}
#content {
float: right;
width: 75%;
background:yellow
}
#main-sidebar {
float: left;
width: 25%;
background:#CCCCCC;
}
#secondary-sidebar {
float: right;
width: 25%;
background: #df9f20;
}
#footer {
clear: both;
background: #cc9;
}
and html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>3 col css layout</title>
<link href="new.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This is the Header!</h1>
</div><!--end #header -->
<div id="main-body">
<div id="content">
<p>this is where the main content will go</p>
</div><!-- end #content -->
<div id="main-sidebar">
<p>left hand sidebar</p>
</div><!-- end #main-sidebar -->
</div><!-- end #main-body -->
<div id="secondary-sidebar">
<p>right hand sidebar</p>
</div><!-- end #secondary-sidebar -->
<div id="footer">
<p>and finally here's the footer</p>
</div>
</div> <!-- end #wrapper -->
</body>
</html>
One solution is to allow for 1% of free space, for example to 75/24%.
I found that changing to 80/20% also works.
