Float Problem in IE

[Historical Forums User]

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;
}

[Soh Tanaka]

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

[Author]

Posts