Layout in IE6 (width and floating problems)

Hey, I need a solution to two problems:

#1
I use a three column layout, where the right and left columns are 150px
wide and floated. The center column is not floated, with margins 150px
on each side to place it between the other two.

I use padding: bigval; and margin: -bigval; (together with overflow:
hidden; on the container) to make the three columns look equally long.
But because the center column is not floated (and I don't want it to
be), IE6 cut the right and left columns where the center column ends.
Is it possible to have IE handle the overflow as if the middle column
also were floated?

#2
Now, if I have a <table width="100%"> inside the center column, in most
browsers (i guess) this table would be contained within the center
column, and will behave just like any other element (e.g. text).

However, in IE6 this is not the case. The width percentage will not
refer to the content area of the center column, and the table will be
placed (ceteris paribus) underneath the center column.

For practical reasons (limitations to the CMS I'm using) I _need_ to
have a table with width=100% inside this center column. And I would
like those 100% to refer to the content area of the center column (as
in e.g. Firefox). So, how can I make this happen?


Here is some relevant css/html in case my above explanation lacks
clarity.

#wrapper{
width: 800px;
background-color: #FFF;
margin: 0px auto;
}
#main{
width: 100%;
margin: 0px;
overflow: hidden;
}
#header{
background-color: #BBB;
margin: 0px;
padding: 0px;
border: 0px solid black;
}
#block_1{
margin-left: 160px;
margin-right: 160px;
background-color: #EEE;
}
#block_2{
float: left;
width: 150px;
background-color: #DDD;
}
#block_3{
float: right;
width: 150px;
background-color: #DDD;
}
#footer{
height: 40px;
background-color: #AAA;
width: 100%;
}
#block_1, #block_2, #block_3{
padding-bottom: 30020px;
margin-bottom: -30000px;
}


<div id="wrapper">
<div id="header">
<h1>Equal Height Columns</h1>
</div>
<div id="main">
<div id="block_2">
<h2>Block 2</h2>
Add Lorem Ipsum here
</div>
<div id="block_3">
<h2>Block 3</h2>
Making<br />this<br />column<br />longer<br />than<br />the<br
/>center<br />column
</div>
<div id="block_1">
<h2>Block 1</h2>
Make one of the side columns longer than this one, and view in
<table width="100%"><tr><td>This is the table I'm talking about.
Try removing it and look see how the right column gets cut
off.</td></tr></table>
</div>
</div><!-- end main -->
<div id="footer">
Footer text
</div>
</div><!-- close div #wrapper -->


I hope my questions make sense, and that someone would be kind enough
to give me some advice.

regards,
Christian Jansen

I found a solution myself, and I post it here for future reference. I
hope someone else might find it useful.

#1
I had to resort to faux columns to make the columns appear equally
long. The method of big positive padding and big negative margin did
not work (in IE6) if not all three columns were floated.

#2
I use Joomla for CMS, and sometimes the modules of Joomla use tables
with 100% width, which turned out to be incompatible with my layout
(i.e. in IE6; it worked just fine in FF). All I had to do to fix this
problem was simply adding another table around the content of my center
column:

<table><tr><td> [Joomla content] </td></tr></table>

This trick makes IE6 behave as if 100% width, in nested tables, refers
to the margins of the center column. Not very pretty, but it works.

- Christian Jansen