100% table width inside left column of two column div layout BROKEN

table width inside a non 100% width div

[ultim8]

I have a two column page formatted using DIV's. My problem is I want the left column to hold a table at 100% width of the column. This works in Mozilla/Firefox. Does not work with IE (4.0-6.0).

Here is a sample of the html:

<link rel='stylesheet' type='text/css' href='style.css'/>
<div class="content-nav">
<h4>More Info</h4>
<ul>
<li><a href="#">Internal page</a></li>
<li><a href="#">Internal page</a></li>
<li><a href="#">Internal page</a></li>
<li><a href="#">Internal page</a></li>
<li><a href="#">Internal page</a></li>
<li><a href="#">Internal page</a></li> 
</ul>
<h4>Links</h4>
<ul>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is a link</a></li>
</ul>
</div>
<div class='content-body'>
<table width="100%" border='1'><tr><td>Test</td></tr></table>
</div>
<div class='clear'></div>

And here is a sample of the style sheet style.css:

.content-body {
margin-left:0px;
margin-right:200px;
border:1px solid black;
}
.content-nav {
float: right;
width: 145px;
margin: 0 0 25px 9px;
padding: 0;
background: #fff;
font-size: .8em;
border:1px solid green;
}
.content-nav h4 {
font-weight: bold;
text-transform: uppercase;
padding: 3px 5px;
margin: 0;
color: #063;
background: #c2e0c2;
border-bottom: 1px #063 solid;
text-align: center;
}
.content-nav ul {
list-style: none;
padding: 5px 10px 8px;
margin: 0 0 15px;
background: #dfffdf;
}
.content-nav ul li {
display: inline;
padding: 0;
margin: 0;
}
.content-nav li a {
display: block;
text-indent: -5px;
text-decoration: none;
padding: 2px 5px;
margin: 0;
}
.content-nav a:hover {
text-decoration: underline;
}
.content-nav p {
text-align: left;
}
.clear {
clear:both;
HEIGHT: 1px; 
}

In IE the table spans not only the full page (is only susposed to span left div), but scrolls off the page!?! But it works great in Firefox.

I know someone will want to just say "Just don't use a table" but whats within that content-body div is not my choice. I have to be prepared for everything. And a 100% width table is not very uncommon.

[Lance]

I got it to work by adding:

height: 1%;

to .content-body

That fixed it for IE, and it stil worked in FF, but you may want to hide it from non-IE browsers.

[ultim8]

Awesome! Worked like a charm! Why do you suposed that it required "height: 1%"?

[Lance]

It's just one of those "IE Bugs"^TM where you need to provide "layout" for the element.