Problems getting a 2 column layout to work in IE

I am trying to build a fixed width 2 column layout with CSS and it looks fine in Safari & Firefox but The columns seperate in IE and the second column falls below the first instead of beside it. I have played with the column widths and nothing seems to fix it.

Here is the HTML
<html>
<body>
<div id="page">
<div id="top">
<img src="images/header_01.gif" width="100%" height="15" />
</div>
<div id="frame" align="center">
<div id="header">
<a href="index.html"><img src="images/header_02.jpg" width="790" height="100" border="0" /></a>
</div>
<div id="nav">
Navigation goes here
</div>
<div id="shadow">
<img src="images/header_shadow.gif" width="100%" height="10" />
</div>
<div id="columna">
<p>Content Goes here</p>
</div>
<div id="columnb">
<p>Secondary Content goes here</p>
</div>
<br style="clear:both" />
<div id="footershadow">
<img src="images/footer_shadow.gif" width="100%" height="10" /></div>
<div id="footer">© 2005, Allyson Adams • <a href="mailto:info@example.com">info@example.com</a> • (406) 555-5555 </div>
</div>
<div id="bottom">
<img src="images/footer.gif" width="100%" height="15" />
</div>
</div>
</body>
</html>

And Here is the CSS

body{
background-color: #c6ae91;
color: #fbf9f2;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 25px;
padding-top: 25px;
font-size: 10pt;
}

#page{
margin:0px auto;
width: 820px;
}

#top, #bottom {
background-color: #776347;
padding: 0;
width: 820px;
text-align: center;
}

#frame{
background-image: url(images/content_bg.gif);
background-repeat: repeat-y;
color: #5C0612;
padding-left: 15px;
padding-right: 15px;
width: 820px;
text-align: center;
clear:both;
}

#header{
width: 790px;
background: #5C0612;
color: #fbe86d;
border-top: 1px solid #fbe86d;
border-bottom: 1px solid #fbe86d;
margin: 0;
padding: 0;
text-align: left;
clear:both;
}

#nav{
width: 790px;
background: #5C0612;
color: #fbe86d;
border-bottom: 1px solid #fbe86d;
margin: 0;
padding: 0;
text-align: center;
clear:both;
}

#shadow, #footershadow{
width: 790px;
background: #fbf9f2;
margin: 0;
padding: 0;
clear:both;
}

#columna {
width: 545px;
background: #fbf9f2;
color: #000000;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 20px;
border-right: 1px solid #5C0612;
float:left;
vertical-align: top;
text-align:left;
}

#columnb {
width: 130px;
background: #fbf9f2;
color: #000000;
padding-top: 32px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
float:left;
vertical-align: top;
text-align:left;
}

#footer{
width: 790px;
background: #5C0612;
color: #fbe86d;
border-top: 1px solid #fbe86d;
border-bottom: 1px solid #fbe86d;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
clear:both;
}

.contact {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #fbe86d;
padding: 5px;
}

.titlered {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #5C0612;
display: block;
padding: 3px;
width: 100%;
}

.rightblock{
border: 1px solid #5C0612;
background: #fbe86d;
margin-left: 10px;
margin-bottom: 10px;
padding: 5px;
float: right;
}

.leftblock{
border: 1px solid #5C0612;
background: #fbe86d;
margin-right: 10px;
margin-bottom: 10px;
padding: 5px;
float: left;
}

.quote{
border: 1px solid #5C0612;
background: #fbe86d;
margin-right: 30px;
margin-left: 30px;
padding: 10px;
}

.textlarge {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
text-align: center;
}
.textsmall {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-align: center;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #5C0612;
}

[edited by: rogerd at 3:47 am (utc) on Mar. 10, 2005]
[edit reason] examplified [/edit]

Problems getting a 2 column layout to work in IE

jermartin

zollerwagner

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week