1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Divs wont line-up correctly in IE

Discussion in 'Web Development' started by SimonJC, Oct 21, 2010.

  1. SimonJC

    SimonJC New Member

    I've not tested this in the New IE, but im having problems with cross browser. Works ok in, Firefox, Google chrome, opera and on the iphone.

    Ive not uploaded this yet to my server so no preview is there.

    Ive coded the divs in place and work fine for the browsers above but when i vist and check in IE the main top Divs wont line up. Whenever i use a margin of about 15px on the left and the rest 0px so like this

    #Banner-Nav {
    Float: left;
    Margin: 0px 0px 0px 10px;

    then it goes 20px insted of the 10px, well seams that way :(
  2. Geoff Tyrer

    Geoff Tyrer Member

    I don't fully understand what you're saying when you mention 20px and 10px but you seem to be suffering what is called "float drop".

    This happens when there isn't enough room for all the columns. The total width of the columns must be less than or equal to the space available (either the browser window or the enclosing block). The width of a column is the width you set plus the horizontal components of the margin, border, and padding. If you're using percentages rounding errors can cause the problem.

    IE6 and earlier has a "double margin" bug. Under some conditions it doubles the margin applied to a floated element.

    IE6 and earlier also sometimes adds a 3px gap between a floated column and a non-floated column - so this might be something to look into.

    IE sometimes makes a floated column wider if it contains italic text!!!

    One problem I've had in IE is when there are three or more columns. In this case I found that the total width of the columns must be LESS THAN the space available by 1 pixel for each column. Say the space available is 1000px and there are four columns - the total column width must be 996 or less.

    To accommodate these IE problems don't try to use every available pixel and leave a bit of free space.

    Credit for all this must go to David Sawyer McFarland and his excellent book "CSS - The Missing Manual".
  3. enigma1

    enigma1 New Member

    Before checking various browsers see if there are any errors with the w3c validator and for the stylesheet. Just a missing closing element could cause problems.
  4. navyfalcon

    navyfalcon Well-Known Member Verified Member

  5. jd132

    jd132 VIP Member

    give property 'overflow: hidden' to the div outside of #Banner-Nav

    coz it's taking width of #Banner-Nav + margin

    hope it help