Fixing Floating Column Drop (Firefox)

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: