I wanted to get rid of tables for my site, so I started using CSS for the first time and it works pretty well, but I got one problem.
I want to display 2 divs (#left_container and #right_container) next to each other. It works perfect in IE7, but in firefox the right container sometimes shows below the left container. But it doesn’t happen all the time, only like 1 out of 10 reloads. The page content does not change. I’ll post the code below.
body {
background: #000000 url(../g/bg.gif) repeat-x;
margin: 0;
padding: 0;
}
#container {
width: 1010px;
background: url(../g/container_bg.png) repeat-y;
margin-left: auto;
margin-right: auto;
font-family: Verdana;
font-size: 11px;
color: #000000;
}
#header,
#page_header,
#menu,
#content_container,
#content_footer {
width: 994px;
margin: auto;
}
#content_container {
background: #FFFFFF url(../g/content_bg.gif) repeat-y;
display: table;
}
#left_container {
float: left;
width: 190px;
margin: 5px;
}
#right_container {
float:right;
width: 784px;
margin-left: 10px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 5px;
}
#right_container SPAN {
display: none;
}
#left_container h3,
#right_container h3
{
font-size: 22px;
font-weight: normal;
color: #000000;
font-family: Verdana;
margin: 0px;
margin-bottom: 5px;
}
<div id="container">
<div id="content_container">
<div id="left_container">
{left_first}<br>
{left_second}<br>
{left_third}
</div>
<div id="right_container">
{right_content_prefix}
{right_content}
</div>
</div>
</div>
Anyone know what I'm doing wrong?
Thanks
