Floating issue in IE

[johnmerlino]

Hey all,

I am having a floating issue in IE 8 with this site:

http://hllawgroup.com/home

The divs involved are the following:

#wrapper div 980px

#main div 698px
25px padding on left and right

so 698 + 25 + 25 = 748px

#panel div width 230px and border left and right 1px
so 230 + 1 + 1 = 232px

748 + 232 = 980px

which is the width of the wrapper

This works fine on Google Chrome, Firefox, and Safari.

However, on IE 8 and probably all other version of IE, something strange happens.

1) On the home page, the #main div drops below the #panel div, as if the main div is too wide to fit within the wrapper, but math above shows this behavior shouldn't happen

2) If you go to the about page, you will notice the opposite occurs. You notice that the #main div is not snuggled up against the #panel div, but rather there is a gap between them. But the math above shows that there should be no gap. So between the home and about pages, in IE, two very strange behaviors occur.

If you look at the page on Google Chrome, you will see what I was trying to do.

Thanks for response

[TogetherWeRise]

Add "Margin: 0px" and "Padding: 0px" to all div's that don't have a preset nonzero padding/margin value applied.

The reason it drops below there is because the width of the content on the line is greater than the preset width of the wrapper, so it goes to the next line. There is probably a padding/margin somewhere on one of those divs that IE is adding to make it overflow like this.

[teedoff]

Try decresing your padding-right on the main div.

Also, dont know why you would center your centent the way you have when all you need is:

#wrapper {
        margin: 0 auto;
        width: 980px;
}

margin: 0 auto will center your content as long as you specify a width less that its container(in this case that would be body). You dont need positioning or negative margins at all.