So it works fine in firefox, but it’s messed up in IE. (the main and sidebar columns don’t align right) Here’s the CSS

Code:

body {
background: #0E285C;
}

#container {
background: #F8FBFF;
margin-left: auto;
margin-right: auto;
width: 870px;
overflow: hidden;
border: 1px solid black;
}

#header {
height: 120px;
min-width: 800px;
clear: both;
padding-left: 10px;
border-bottom: 1px solid #ccc;
}

.logo {
float: left;
display: inline;
}

.ad {
float: right;
width: 468px;
height: 60px;
margin-top: 20px;
margin-right: 5px;
border: 1px solid #ccc;
background: blue;
display: inline;
}

#content {
min-width: 850px;
overflow: hidden;
}

#sidebar {
min-width: 300px;
padding: 10px;
margin: auto;
float: right;
height: 500px;
position: relative;
}

#main {
min-width: 529px;
border-right: 1px solid #ccc;
height: 500px;
float: left;
padding: 10px;
position: relative;
margin: auto;
}

#footer {
border-top: 1px solid #Ccc;
clear: both;
}

#categories {
float: left;
width: 269px;
height: 200px;
padding: 10px;
border-right: 1px solid #ccc;
margin: auto;
position: relative;
}

#recent {
float: left;
width: 269px;
height: 200px;
padding: 10px;
margin: auto;
position: relative;
border-right: 1px solid #ccc;
}

#about {
float: left;
padding: 10px;
width: 270px;
height: 200px;
margin: auto;
position: relative;
}

And here’s the html output

Code:
<body>
    <div id="container">
<div id="header">
<div class="logo">
<img src="../wp-content/themes/design/images/ddlogo.png" alt="Diligent Design" />
</div>
<div class="ad">
Your ad here!
</div>
</div><div id="content"><div id="sidebar">
</div><div id="main">
</div>
</div>
<div id="footer">
    <div id="categories">
    </div>
    <div id="recent">
    </div>
    <div id="about">
    </div>
</div>
</div>
</body>

Any suggestions?

30,000 Mb And Unlimited Bandwidth Only $3.75/mo.


Go Daddy $6.95 .com sale 468x60

Powered By: BigInfo.org