Moving DIVs in FireFox

[tchallies]

This problem is driving me crazy.

I have a fairly simple 3-column layout. It's as simple as three floated columns. Anytime I click on a new page or refresh a page in Firefox there is a roughly equal chance that the page will be laid out properly or that it will be all wrong.

Basically what happens is that the information within the middle column decides to appear under the third column. Or sometimes, just for kicks, the information from both the second AND third columns will appear in the proper place but below the end of the first column.

Does anyone even know what I'm talking about? Can anyone help? The CSS is as follows:

div.container {
display: table;
width: 780px;
margin: 0 auto;
text-align: center;
background: url(images/bg_slice.jpg);
}

div.col {
float: left;
width: 129px;
padding-left: 8px;
}
div.article {
float: right;
width: 315px;
text-align: left;
}
div.col2 {
float: right;
width: 316px;
text-align: left;
padding-right: 8px;
}

[tedster]

I can't reproduce this result using my own filler content for the divs - so my guess would be that your total width of all divs is just a bit too close tolerance for the content you are placing in them.

Sometimes a rendering engine needs to bend the author's width rules just a bit and not be pixel perfect in order to accommodate the content. So I'd suggest giving either .article or .col2 a slightly smaller width, or perhaps making the padding a few pixels smaller. This would give all the divs enough leeway to float as you intended, even if the content pushes them to be rendered just a bit wider than you state.

[MatthewHSE]

When working with floats, I've learned to always give myself some room for things to flop around in a bit. Looking at your CSS, you only have 4px total left over. As a general rule of thumb, I normally give myself about 5px extra between each float; that seems to cover most real-world rendering differences.

[tchallies]

Thanks for replying. I think you guys are right - I just didn't leave enough space. Of course now my design doesn't look quite right, but I'll just have to work around it.

Stupid browsers...