Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Thanked 3 Times in 3 Posts

    Floating issue in IE

    Hey all,

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


    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

  2. #2
    New Coder
    Join Date
    May 2011
    Thanked 0 Times in 0 Posts
    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.

  3. #3
    Senior Coder
    Join Date
    Aug 2010
    High Point, NC
    Thanked 363 Times in 360 Posts
    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.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts