column layout problem in IE6 only

This works in firefox, safari, opera, IE7, etc. but i can't figure out why it is so screwed up in IE 6.

Between the header and footer which seem okay, in the middle of the page I have

<div id="page">
<div id="content">
posts go here
</div>
<div id="sidebar">
all my menus
</div>
</div>

this is the style sheet info for those divs:


#page {
margin: 0px auto;
width: 720px;
background: url(images/bg.gif);
}
#content {
margin:0px;
overflow: hidden;
padding-right:30px;
padding-top:20px;
height:auto;
}
#sidebar {
float: right;
width: 180px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
height:auto;
}



I have tried setting a fixed width for #content that is smaller, but it seems to make no difference, and just makes it look less good in the other browsers.

Page is currently here: http://queirdo.com with full code.
Screenshot of the problem in ie6 here: http://queirdo.com/ie6.png

If anyone can help or even point me in the right direction, I would greatly appreciate it!

Could be wrong, but it looks like it might be the ie6 float bug. Try adding the highlighted to your css:


#sidebar {
display:inline;
float: right;
width: 180px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
height:auto;
}


Let us know if that helps,

Drew

Edit-Welcome to the forum by the way :)

.post {
/*clear:both;*/
padding-top: 10px;
padding-bottom:0px;
margin-bottom:30px;
margin-left:15px;
margin-right:3px;
}
.post-title {
/*float: left;
width: 504px;*/
}

.entry {
/*clear: both;*/
margin-bottom:0px;
text-align:justify;
}

should work!

Thanks for the suggestions... some success...

Adding display:inline didn't do anything.

Making the changes abduraooft suggested brought the post part of the page up to the top, but the sidebar menu is still shifted left instead of aligning to the right.

Here's a screenshot now:

http://queirdo.com/ie6-2.png

Any ideas?

That's due to the left/right paddings/margins applied to the sidebar or it's inner elements.

To fix this, I changed width and padding values for everything inside that sidebar div, as well as the div itself, until it worked for IE6 (which apparently renders width and padding totally differently than other browsers just to make life more fun). This made other browsers look terrible of course, but then I used the html>body selector trick to send the right values to other browsers, correcting the width. IE 6 doesn't understand this, but IE 7 and all the other reasonable browsers do.

Thanks for pointing me in the right direction.