IE6 text droping down

[ddregallo]

I've made a simple 2 columns with header css layout. It looks very good in IE7 and Firefox. In IE6 the content area's text and such "drops down" as if I had set clear left(but I didn't). The relavent portion of my CSS is below. Any ideas?

#body {
font-family: Verdana, Helvetica, arial, serif;
background-color: #fff;
margin: 0;
padding: 0;
}

#container {
width: 800px;
margin: 0 auto;
padding: 0;
background-color: #fff;
border: 1px solid gray;
}

#header {
width: 800px;
height: 70px;
background-image: url(bgimg.jpg)
background-color: #fff;
}

#content {
width: 640px;
margin: 0 0 0 150px;
padding: 5px;
text-align: left;
}

#leftbar {
float: left;
width: 150px;
margin: 0;
background-color: #EFEFDE;
}

</dan>

[Setek]

Your total width of "leftbar" plus content area turns out to be exactly 800px. The total width of the container area is 800px. This is what's called a "pixel-perfect" layout - which all too often will break in one, if not all, browsers.

IE 6 doesn't like to have things too close to one another. Usually when you approach the maximum allowable space, it just bumps stuff down to where it sees fit.

Remove the width on the content area - if you have a fixed width container, the content area will take up what it can (800px minus leeway minus 150px) and hopefully not bump down.

[ddregallo]

Thanks for the reply. I managed to make it work even with the width on the content area, but it was ugly(negative margins). I removed the width from #content and it works fine now without the negative margin hacks!