Grow your CSS skills. Land your dream job.

Floats 3 across

  • # January 20, 2010 at 10:39 am

    Hi Everyone

    This is my first post here on this lovely forum and i hope i grow to be a long time member :)

    I’m running into some problems floating a few elements on a page.

    This is what i’d like to achieve i’ve uploaded here so its easier.

    This is whats happening in IE6
    [img]http://i55.photobucket.com/albums/g130/antz06_photos/ie6_cart_after.png[/img]

    This is all ok in IE7 and Firefox
    [img]http://i55.photobucket.com/albums/g130/antz06_photos/Firefox.jpg[/img]

    Here is the css.

    Code:
    .container { width: 950px; margin:0 auto; }
    .wrapper { float:left; position:relative; width:930px;height:100%;padding:10px; background-color:black; }

    #logo { float:left; position:relative; margin:0; padding: 0 10px 10px 0; width:563px; height:148px; background:url(../styleImages/backgrounds/header.gif) no-repeat; }
    #cart { float:left; position:relative; width: 153px; height:148px; margin:0; background:url(../styleImages/backgrounds/cart_base.gif) no-repeat; }

    .holder { float:left; position:relative; background-color:green; padding-left:10px; }
    .session { float:right; width: 194px; height:66px; background:url(../styleImages/backgrounds/session_base.gif) no-repeat;background-position:top; padding-bottom:10px; }
    .search { float:right; width: 194px; height:72px;background:url(../styleImages/backgrounds/zoom_base.gif) no-repeat; }

    and this is my markup so far

    Code:
    {SHOPPING_CART}
    {SESSION}

    Now for the life of me,,, i cannot figure out why this is happening in IE6 and if i’ve done this correctly.

    Would someone please be so kind as to show me the way.

    Thank-you.
    Jess

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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