Trying to get a layout that is all CSS, but I can't for some reason. I broke it down to the basic code, please tell me whet I'm doing wrong. I've tried this a few ways, going as far as having a bunch of hacks for different browsers, etc, but after beating my head against the wall for 4 hours, I've started over, so here's the layout in it's simplest form.
This is a fixed-width 2-column layout. I'm getting different results in firefox 1 and IE 6, both wrong.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> <!--
body{
background-color: #e0d7cc;
font-family: Arial, Helvetica, sans-serif;
margin:0;
padding:0;
min-width:780px;
}
#wrapper{
width: 780px;
position: absolute;
left: 50%;
margin-left: -390px;
}
#top{
width: 780px;
background-color: #FFDAB9;
}
#header {
float: left;
width: 592px;
height: 175px;
background-color: Olive;
}
#menu {
float: left;
width: 188px;
height: 175px;
background-color: #D2B48C;
}
#main {
float: left;
width: 592px;
background-color: Silver;
}
#sidebar {
float:left;
width:188px;
margin-left:592px;
background-color: #f23456;
}
#footer{
width: 780px;
background-color: #AFEEEE;
clear: both;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="header">header</div>
<div id="menu"><p>menu</p></div>
<div id="main"><p>main body<br /> main body <br /> main body</p></div>
<div id="sidebar"><p>Sidebar</p></div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>