Hi all, and thanks for any help beforehand.

First of all, here is the site I'm working on:
http://demo.webdesigntuts.net/wwandw/

It looks great in Firefox, Opera and Safari (and IE8 now that I think of it).

Any version of IE between 5.5 and 7 will display a huge empty block of space beside the floating sidebar. I have a clear:both div at the end of the content, just inside the container.

I have read numerous articles on this and tried many different hacks for IE but all to no avail.

Any help at all would be greatly appreciated.

I just checked try to work on the width of your container div... look like something is getting bigger in IE5 IE6 it does not look like a clear problem.

try to make different style CSS sheet for IE5 IE6 IE7

When you float something that has no specific width set you should set a width. You do not do this for "sidebar_float". IE will drop those div's to another level most of the time without a width.

Here's more help on ie6:
http://sixrevisions.com/web-developm...the-ie6-beast/

try to make different style CSS sheet for IE5 IE6 IE7

I know and I have! But thanks for the help anyway.

When you float something that has no specific width set you should set a width. You do not do this for "sidebar_float". IE will drop those div's to another level most of the time without a width.

Here's more help on ie6:
http://sixrevisions.com/web-developm...the-ie6-beast/

Although it didn't solve my problem it was a great read, thanks. But somehow I did manage to solve it. In the main_content div I used padding-left instead of margin-left in the normal CSS. I can't believe it was so easy when I was practically pulling my hair out trying to fix it!

If anyone's wondering about the <hr /> border problem in IE, here is the solution. http://www.webmasterworld.com/forum83/4412.htm

I used padding-left instead of margin-left in the normal CSS

IE6 and below have a nasty bug with margins on floats - it's called the doubled-float margin bug and it happens when you apply a margin that goes in the same direction as the float as in - float:left with left margin and float:right with right margin - IE6 and below will DOUBLE whatever number you have in there for the margin.

To stop that, you use conditional comments to call a separate stylesheet that contains ONLY the bug fixes needed for IE and the fix for this particular bug is to add display:inline for the floated element with the margin on it.

Yeah, thanks for that. I have read about the display:inline and other specific browser properties and have a few of them in use with the separate IE CSS.

IE6 and below have a nasty bug with margins on floats - it's called the doubled-float margin bug and it happens when you apply a margin that goes in the same direction as the float as in - float:left with left margin and float:right with right margin - IE6 and below will DOUBLE whatever number you have in there for the margin.

I should have explained a bit better. The sidebar_float div is set to float left, and the main_content div is to the right of that (but not floating), so I set a fixed with of 670px (I think) and set a left margin of something like 150px.


Any chance of a few opinions on the site?