I am learning to build a page without tables, and small details keep getting in my way. This is very frustrating!

I want a container DIV to stretch to fit the nested DIVs inside it. I want this container div to have a single background color that will show through the nested divs. Seems simple enough... I could just put all my divs inside a single cell table and be done w/ it. But I want to learn how to do it table-less.

The code is posted below. This seems to work on IE6win (although the text in the middle column sometimes disappears!) However, in Netscape 6 win, the middle column does not stretch out. How can i get this to be cross-browser compatible?

I'd appreciate any help you can give... thanks!

John

<html>
<head>
<style>
#container {
background-color:lightblue;
}

#left {
float: left;
width: 175px;
}
#right {
float: right;
width: 175px;
}
#middle {
margin:0 175px;
border: 1px solid red;
background-color:lightyellow;
}

.clear {
clear: both;
}

</style>
</head>
<body>
<div id="container">
<div id='left'>
<p><strong>#left {<br>
float: left;<br>
width: 175px;<br>
}</strong></p>
<p>Float Left Float Left Float Left Float Left Float Left Float Left Float
Left Float Left Float Left Float Left Float Left Float Left Float Left
Float Left Float Left Float Left Float Left Float Left Float Left Float Left
Float Left Float Left Float Left Float Left Float Left Float Left Float Left
Float </p>
</div>
<div id='right'>
<p><strong>#right {<br>
float: right;<br>
width: 175px;<br>
}</strong></p>
<p>Float Right Float Right Float Right Float Right Float Right Float Right
Float Right Float Right Float Right Float Right Float Right Float Right Float
Right Float Right Float R Right Float Right Float Right Float Right Float
Right Float R Right Float Right Float Right Float Right Float Right Float
R Right Float Right Float Right Float Right Float Right Float R Right Float </p>
</div>
<div id='middle'>
<p><strong>#middle {<br>
margin:0 175px;<br>
border: 1px solid red;<br>
background-color:lightyellow;<br>
}</strong></p>
<p>Text in the middle Text in the middle Text in the middle Text in the middle
Text in the middle Text in the middle Text in the middle Text in the middle
Text in the middle Text in the middle Text in the middle Text in the middle</p>
<div class='clear'></div>
</div>

</div>
</body>
</html>