2 column layout - using borders and margins - CSS forum at WebmasterWorld

I'm trying to do a 2 column layout using borders and margins. But, when I view the page in IE6, the left column (id="sidebar") does not show up. The color shows up, but the actual content is not visible. Please help. My basic code looks like...

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert Title Here</title>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:#4d74df;
}
#container {
background-color:#ffcc66;
border-left:220px solid #2121b0; /*to create column effect*/
margin:0;
padding:0;
}
#header {
background-color:#4d74df;
margin-left:-220px;
}
#mainNav {
background-color:#2121b0;
border-top:2px solid navy;
padding-left:220px;
color:#d7d7d7;
}
#sidebar {
background:#2121b0;
width:220px;
float:left;
margin-left:-220px;
padding:0;
color:#d7d7d7;
}
#content {
background-color:#ffcc66;
padding:1em;
border-top:2px solid navy;
border-left:2px solid navy;
border-bottom:2px solid navy;
}
#footer {
background-color:#4d74df;
color:#d7d7d7;
margin-left:-220px;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Header
<div id="mainNav">
Main Navigation
</div>
</div>
<div id="sidebar">
Sidebar
<div id="sectionNav">
Section Navigation
</div>
</div>
<div id="content">
<p>This is the content area</p>
</div>
<div id="footer">
Footer here
</div>
</body>
</html>

2 column layout - using borders and margins

IE 6 does not show column content

J64sqs

Moby_Dim

J64sqs

Moby_Dim

J64sqs

Moby_Dim

J64sqs

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week