Get a free trial // 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

    This is all ok in IE7 and Firefox

    Here is the css.

    .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


    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.


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed