Divs shoving down in firefox inconsistently

[blonde developer]

I'm having a big problem with firefox 2 erratically displaying my 3 column layout. Sometimes things are fine, other times the middle and right column get shoved down below the last content item in the left column. Clearly the page is unstable.

Here is the stripped down HTML and CSS (the image in total_insidecontainer is 924 px wide and represents a 3-column faux column):

<div id="total_insidecontainer">
<div id="leftside">
This is the left side.
<div class="color_box_default_left"></div>
</div><!-- end leftside-->

<div id="leftcontent">
This is the middle column
</div>

<!-- RIGHT COLUMN BEGIN -->
<div id="sidebar">
This is the right column
</div>
</div><!-- total_insidecontainer-->

CSS:
#total_insidecontainer
{
width: 924px;
background:url(../siteimages/bg-across.gif) repeat-y;
display: table;
}

#leftside {
float: left;
width:218px;
background-color:#FBECBC; }

#leftcontent
{color: #666666;
float: left;
width: 501px;
margin-right: 4px;}

#sidebar
{
width: 197px;
float: right;
background: transparent;
color: #4C5323;}

[Xapti]

all your columns are floated. That's no good.
You shouldn't really need to have the center column in a div, depending on what your style goal is, and how much you care about it.
Removing the leftcontent div should essentially fix things, but you could also just remove the float on leftcontent if you still want that div there.

[SuzyUK]

Welcome to the Forums, blonde_developer!

I have to disagree with Xapti ;) - it would not be a good idea to remove that content div, it's best if every "column" is indeed in it's own div. In your case I presume removal of it would lead to unwanted wrapping as opposed to columns?

you say it's erratic, is it specific to certain pages or just one page that sometimes does it?
and when it happens does a page refresh correct it?

I think it might have something to do with you using

display: table;

for containing floats.. but that's a guess for now ;)

if a refresh does correct it, try using overflow: auto; instead of display: table for recommended way to contain the floats to see if that helps

[edited by: SuzyUK at 11:33 am (utc) on July 27, 2007]

[vincevincevince]

Odd you should come up with this question - I am trying to find the answer to an almost identical problem.

In my case, the rendering changes on refreshes of an identical HTML + CSS page. Is that also the case for you?

[HarryM]

My solution would be to get rid of "display:table" and add an extra div.

<div id="total_insidecontainer">
<div id="leftside">
This is the left side.
<div class="color_box_default_left"></div>
</div><!-- end leftside-->

<div id="second-container">
<div id="leftcontent">
This is the middle column
</div>
<!-- RIGHT COLUMN BEGIN -->
<div id="sidebar">
This is the right column
</div>
</div><!-- second-container-->
</div><!-- total_insidecontainer-->

CSS

#second-container
{
width: 698px;
float:right;
}