I got a element called middlebox, the css is
#middlebox{
width: 100%;
position: relative;
border-top-width: thin;
border-top-style: solid;
border-top-color: #CCCCCC;
height: auto;
}
and there are three elements in there, left container, center container, and right container. The css is
#leftcontainer{
background: #E9D611;
margin: 0 auto;
padding: 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
width: 13%;
border-right-width: 0.25em;
border-right-style: solid;
border-right-color: #CCCCCC;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
border-top-width: thin;
border-top-style: solid;
border-top-color: #FFFFFF;
left: 0;
float: left;
height: 100%;
overflow: hidden;
}
#centercontainer{
position: relative;
width: 70%;
left: 15%;
}
#rightcontainer{
position: relative;
width: 13%;
border-bottom-width: thin;
border-left-width: thin;
border-bottom-style: dashed;
border-left-style: dashed;
border-bottom-color: #002196;
border-left-color: #002196;
float: right;
height: 100%;
top: 0%;
padding-bottom: 0.5em;
display: block;
}
The containers aren't showing up in horizontal line, what's up? Is it borders or margins or something? In Firebird/Mozilla its fine, but in Opera and IE the right container wraps to another line, and shows below.