I’m using the following bit of code inside of my page. I have two columns of equal size floating inside of a div id="main content”. The two columns have fixed sizes so there should be a 20px “gutter” in the middle if floating them both left and right respectively. Funny thing is that it was working for a sec, then I must have messed something up, cause it’s not working now. I imagine it’s something simple I’m overlooking… I’m hoping a few more eyes are better than the two I’ve been using for the past hour or so.
<HTML>
<HEAD>
<TITLE>website</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css">
<!--
#header {
position:relative;
width:940px;
height:164px;
}
#sidebar {
position:relative;
float: left;
width:200px;
height:1186px;
}
#main-content {
background-color: green;
position:relative;
padding: 20px;
float:right;
width:700px;
<!--[if IE]>width: 740px;<![endif]-->
height: 2000px;
}
#topsection {
position:relative;
width:700px;
height:255px;
margin-bottom: 20px;
}
#section-bar {
position:relative;
width:700px;
height:29px;
margin-bottom: 20px;
}
#content-column1 {
background-color: blue;
position:relative;
clear: both;
float: left;
width:340px;
height:755px;
}
#content-column2 {
background-color: orange;
position:relative;
float: right;
width:340px;
height:755px;
}
#row {
margin-bottom: 20px;
}
#pic {
background-color: green;
float: left;
width: 110px;
}
#description {
background-color: red;
float: right;
width: 210px;
}
#footer {
position:relative;
width:940px;
height:150px;
}
-->
</STYLE>
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<DIV ID="" align="center">
<DIV ID="header">
<IMG SRC="images/header.gif" WIDTH=940 HEIGHT=164 ALT="">
</DIV>
<DIV ID="content" style="width: 940px;">
<DIV ID="sidebar">
<IMG SRC="images/sidebar.gif" WIDTH=200 HEIGHT=1186 ALT="">
</DIV>
<DIV ID="main-content">
<DIV ID="topsection">
<IMG SRC="images/topsection.gif" WIDTH=700 HEIGHT=255 ALT="">
</DIV>
<DIV ID="section-bar">
<IMG SRC="images/section-bar.gif" WIDTH=700 HEIGHT=29 ALT="">
</DIV>
<DIV ID="content-column1">
</DIV>
<DIV ID="content-column2"> world
</DIV>
</DIV>
</DIV>
<DIV ID="footer">
<IMG SRC="images/footer.gif" WIDTH=940 HEIGHT=150 ALT="">
</DIV>
</DIV>
</BODY>
</HTML>
Any ideas?
Thanks