2 column layout ~ sidebar DIV content falling below main DIV in IE

**JasonPP** · Jan 21, 2005, 15:37

I've been working on this for a while and searched the forums for a solution, but my CSS skills are still developing, and I'm not sure what to look for.

In FF and O 7 it works really well, but in IE the left sidebar DIV falls to below the main DIV. Anyone have any idea what I'm missing here?

Take a peek at http://www.jasonprini.com/index3.php

which uses the following css:

/* globals
---------------------------------------------*/
body {
margin:0;
padding:0;
background-color:#000;
font: small "Times New Roman", Times, serif;
min-width:760px;
background: #fff url(../images/b.gif);
font-size: 12px;
}
div#wrap {
background:#fff;
margin:0 auto;
width:760px;
border: 1px solid #999;
border-top: 0px;
background-image: url(../images/bg.gif);
}

/*links
---------------------------------------------*/
a:link {
color: #333333;
}
a:visited {
color: #FF9933;
}
a:hover {
color: #FF9933;
}
a:active {
color: #333333;
}

/* header
---------------------------------------------*/
#header {
background-color:#fff;
background-image: url(../images/jp.jpg);
background-position: right;
background-repeat: no-repeat;
}
#header h1 {
padding:10px 15px 5px;
margin:0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 22px;
}

/* navigation
---------------------------------------------*/
#nav {
background-color:#fff;
padding:0px;
border-bottom: 1px solid #999;
}
#nav ul{
margin:0;
padding:0;
}
#nav li{
display:inline;
list-style:none;
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
#nav a:link, #nav a:visited {
padding: 3px 10px 0px 15px;
color: #000;
background-color: #fff;
text-decoration: none;
}
#nav a:hover {
color: #FF9933;
background-color: #ccc;
}

/* main
---------------------------------------------*/
#main {
padding:0px;
float:left;
width:490px;
}
#main p {
padding: 5px 15px 5px 15px;
}
#main h1 {
padding: 5px 5px 5px 15px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #000;
font-weight: bold;
font-size: 22px;
}

/* moblog
---------------------------------------------*/
#moblog {
padding: 10px;
width: 250px;
float:left;
}

/* sidebar
---------------------------------------------*/
#sidebar {
width:267px;
margin-left:490px;
}
/* Correct IE 3px fudge in #sidebar DIV
---------------------------------------------*/
#wrap > #sidebar {
width:270px;
}
/*
---------------------------------------------*/
#sidebar h1 {
padding:5px 10px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align:right;
font-weight: bold;
font-size: 12px;
border-bottom: 1px solid #999;
}
#sidebar h3, #sidebar p {
padding:0px 10px;
}

/* footer
---------------------------------------------*/
#footer {
background-color:#fff;
clear:both;
border-top: 1px solid #999;
}
#footer p {
padding:5px;
text-align:center;
margin:0;
}

**maxor** · Jan 21, 2005, 15:59

It's because the two things that you're floating next to each other are too wide according to IE. Remember, IE has the broken box model so while things will look fine in browsers that support to correct box model, IE thinks the boxes are too wide to fit in the space you've provided.

Try making them smaller or adding a hack to adjust the width for IE.

**Paul O'B** · Jan 21, 2005, 16:46

Hi,

maxors right in a way but its not a box model problem its the 3 pixel jog on floats that you haven't fully taken care of.

Code:

* html #main{margin-right:-3px}
#sidebar {
width:270px;
margin-left:487px;
}
/* Correct IE 3px fudge in #sidebar above
---------------------------------------------*/
#wrap > #sidebar {
margin-left:490px;
}
/*

You need to reduce the right margin of a float by 3px and then you also need to reduce the margin-left of the static element because ie adds 3px to it. This allows you to have the correct width for both elements.

See The FAQ on floats for more info

Paul