IE7 not agreeing with 2 column layout! [Archive]

bullant

05-04-2011, 02:40 AM

Maybe try this "skeleton" header, 2 columns for content, footer layout as a guide. It works in my IE7+.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#wrapper {
width: 900px;
margin: 0px auto 0px auto;
border: 1px solid red;
height: auto;
}
#header {
border: 1px solid blue;
}
#content {
width: 70%;
float: right;
}
#content .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
}
#sidebar {
width: 30%;
float: left;
}
#sidebar .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
border: 1px solid green;
}
#footer {
clear: both;
border: 1px solid black;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER and NAVIGATION BAR</h1>
</div>
<div id="content">
<div class="gutter"> 
<h1>LEFT MAIN CONTENT COLUMN</h1>
</div>
</div>
<div id="sidebar">
<div class="gutter"> 
<h1>RIGHT SIDE BAR COLUMN</h1>
</div>
</div>
<div id="footer">
<h1>FOOTER BAR</h1>
</div>
</div>
</body>
</html>