Grow your CSS skills. Land your dream job.

Float Problem in IE

  • # April 22, 2009 at 3:00 pm

    I have a bottom content bar that I want three elements to appear in (one all the way to the left, one in the center, and one all the way to right). It’s working currently in Firefox and Safari but not in IE. The center element is overrunning into the right one. Any ideas?

    Code:
    /* BOTTOMBAR */
    #backgroundbar {
    background: url(../images/basicinfobg.jpg) repeat-x;
    height: 144px;
    margin: 0px auto;
    }

    #backgroundbar h1.trade {
    color: #FFFFFF;
    padding-bottom: 9px;
    text-transform: lowercase;
    font-size: 20px;
    line-height: 18px;
    }

    #backgroundbar p {
    color: #FFFFFF;
    font-size: 11px;
    margin-top: 0px;
    text-transform: lowercase;
    line-height: 18px;
    }

    #barcontainer {
    width: 960px;
    height: 144px;
    margin: 0px auto;
    position: relative;
    }

    #bottomleft {
    float: left;
    width: 230px;
    text-align: right;
    padding: 27px 40px 0 0;
    background: url(../images/bottomborderline.jpg) right 20px no-repeat;
    }

    #bottomleft h1.trade {
    text-align: right;
    }

    #bottommiddle {
    float: left;
    width: 330px;
    height: 144px;
    margin-left: 0px;
    padding: 27px 40px 0px 40px;
    text-align: center;
    }

    #bottommiddle h1.trade {
    text-align: center;
    }

    #bottomright {
    float: right;
    width: 230px;
    padding: 27px 0 0 45px;
    text-align: left;
    background: url(../images/bottomborderline.jpg) left 20px no-repeat;
    }

    # April 22, 2009 at 7:07 pm

    should drop a link + show html so someone can help u out~

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

You must be logged in to reply to this topic.

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