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
