Fixing Floating Column Drop (Firefox)

April 25, 2007

In a recent redesign of a site I’ve experienced the problem where (only in firefox) the right column of a two-column layout (within a container div) will drop even though I’ve ensured there is no overlap between the columns.

The trick to fixing this mysterious column drop is to amend the CSS for the containing div. Instead of setting it as

display:table;

Set the display as:

display:inline-table;

Here’s the relevant html code:

<div id="navigation">
<div class="navblock-left"><a href="cv.php">curriculum vitae</a></div>
<div class="navblock-right"><a href="portfolio.php">portfolio</a></div>
</div>

And here’s the CSS:

#navigation {display:inline-table; font-family:verdana, arial, sans-serif; font-size:xx-small;}

.navblock-left {
background-color:#442200;
margin:5px 5px 5px 5px;
padding:20px 0 0 0;
text-align:center;
width:70px;
height:50px;
float:left;
font-size:x-small;
}

.navblock-right {
background-color:#442200;
margin:5px 5px 5px 5px;
padding:20px 0 0 0;
text-align:center;
width:70px;
height:50px;
float:right;
font-size:x-small;
}

I only experienced this error with firefox… and that seemed to fix it, without affecting the display in IE. Sweet.