Wide Tables Deforming my CSS Layout

A 2 column liquid layout is being deformed by wide data table

[ivank]

I have a 2 column liquid layout with the following structure:

#nav {
width: 185px;
float: left;
}
#content {
margin: 0 0 0 200px;
padding: 0;
}

<div id="nav">Nav here</div>
<div id="content">

<table>a really wide table with lots of cells goes here</table>

</div>

In Win/IE6, the wide table forces the "content" div to drop below nav div. Mozilla handles this fine - it makes the user scroll horizontally. How do I prevent IE from clearing the "nav" div?

I had a work around where the table is nested in a div with overflow set to auto -- this is fine, but not ideal.

Any suggestions / help would be appreciated.

[swa66]

You can have the same effect with e.g. an image or just long words in IE. I'd love to hear a solution as well.

My solution so far has been to remove column based layout in order to avoid most of the challenges IE has. Not just this "I'll clear that for you", but all sorts of other bugs. Really column based layout is still thinking of tables to start your layout. Try tinking of the layout as text flowing down the page where you can float elements to the left or right as needed. I've found that much easier to work with and triggering much less bugs in IE.