Grow your CSS skills. Land your dream job.

[BUG] Floats with Percent and IE

  • # November 19, 2008 at 11:21 am

    Hi,
    I’m fairly new to css (and this forum, hi!) and I’ve been struggling recently with a quirk in IE(7).

    It involves floats (and yeah I’m trying to avoid them as much as I can, until IE shapes up and does it right). In the layout I’m using a bunch of position:relative & z-index to make a layered footer, with transparent png’s. I would’ve made it into one image, but I’m aiming for a fluid, 100%, centered layout.

    So far so good right?
    The problem arose when I looked at the layout in IE. Apparently that browser doesn’t like 2 floats with 50% widths inside a 100% div. I have to make one 49% and the other 50%. So, in an all MS IE world the math goes 49+50=99 and 50+50=101 ??
    F.Y.I. I’ve zeroed out all margins and paddings, as you can see.

    My question is, is this related to a float-bug, or a %-bug? Or a combination of them both? Or maybe I’ve missed some basic stuff about IE? (i.e. -Have you turned the computer on? :) )

    Any and all light on this subject would be killer.

    Here’s screenshot of that footer in Safari:
    [img]http://ta-det-lugnt.se/data/49.percent.floats.inside.100.png[/img]
    And here’s the basic code:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    # November 19, 2008 at 12:47 pm

    No idea how and why it happens but if you use absolute positioning left and right 0 along with the floats it will work :)

    http://johnsbeharry.com/lab/code/2-50-p … lumns.html
    I made this little one for you ;)

    # November 19, 2008 at 1:48 pm

    Yeah I think that is a problem trying to line up two things of 50% width next to each other with floats. Jonz example does work, although it doesn’t even need the float attribute when using absolute positioning. If your two sides don’t have different backgrounds, using 49% should work fine as well.

    # November 19, 2008 at 2:56 pm

    Ah mighty fine point no floats needed :|
    :oops: …

    # November 20, 2008 at 5:58 am

    Thanks guys. Absolute it is.
    Another reason to leave floats alone a few years.

    For future reference, the new code is:

    Code:
    * { margin:0; padding:0; border:0; }
    #footer {
    height:347px;
    position:relative;
    z-index:1;
    width:100%;
    background:url(‘footer.jpg’) bottom left repeat-x;
    overflow:hidden;
    }
    .leftcolumn, .rightcolumn {
    padding-top:242px;
    position:absolute;
    bottom:0px;
    z-index:1000;
    height:105px;
    width:50%;
    }
    .leftcolumn {
    background:url(‘footer-bl.jpg’) bottom left no-repeat;
    left:0px;
    }
    .rightcolumn {
    background:url(‘footer-br.jpg’) bottom right no-repeat;
    right:0px;
    }
    # November 20, 2008 at 8:19 am

    ^^ Ye floats can sometimes be hard to manipulate but as long you practice you should get accustomed to what to and not do :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".