Hi
I've had a search but can't find an obvious answer on this. I want the three columns to stretch to the height of the tallest (centre) column's content.
See this test page: <!-- m --><a class="postlink" href="http://www.joewalkden.co.uk/layout3mark2">http://www.joewalkden.co.uk/layout3mark2</a><!-- m -->
I've tried employing the faux column method from alistapart but am either doing it wrong or it doesn't work with different colored columns.
Does anyone have any other suggestions?
Thanks a lotBasically you're way off
<body>
<div id="wrapper">
<div id="wrapper2">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="footer"></div>
</div>
</div>
</body>
The Background Images: You'll need two, one for the left column and another for the right column.
1) Give #wrapper the background color of your middle column.
2) Give #left the background color of your left column.
3) Give #right the background color of your right column.
4) Give #wrapper the background image for the left column. Have it aligned top left and repeat-y.
5) Give #wrapper2 the background image for the right column. Have it aligned top right and repeat-y.
6) Apply this property to your #footer to keep it below the three columns: clear: both;.
7) The #middle DIV is to remain unfloated. Give it left and right margins equal to the widths of the left and right columns.
8) Float #left and #right and give them widths.
Once you're done playing with that, you might be interested in Source-Ordered Columns (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->) or Creating Liquid Layouts with Negative Margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->).I suspected I may have missed something! thanks I'll have a go with this and see how I get on
I've had a search but can't find an obvious answer on this. I want the three columns to stretch to the height of the tallest (centre) column's content.
See this test page: <!-- m --><a class="postlink" href="http://www.joewalkden.co.uk/layout3mark2">http://www.joewalkden.co.uk/layout3mark2</a><!-- m -->
I've tried employing the faux column method from alistapart but am either doing it wrong or it doesn't work with different colored columns.
Does anyone have any other suggestions?
Thanks a lotBasically you're way off
<body>
<div id="wrapper">
<div id="wrapper2">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="footer"></div>
</div>
</div>
</body>
The Background Images: You'll need two, one for the left column and another for the right column.
1) Give #wrapper the background color of your middle column.
2) Give #left the background color of your left column.
3) Give #right the background color of your right column.
4) Give #wrapper the background image for the left column. Have it aligned top left and repeat-y.
5) Give #wrapper2 the background image for the right column. Have it aligned top right and repeat-y.
6) Apply this property to your #footer to keep it below the three columns: clear: both;.
7) The #middle DIV is to remain unfloated. Give it left and right margins equal to the widths of the left and right columns.
8) Float #left and #right and give them widths.
Once you're done playing with that, you might be interested in Source-Ordered Columns (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->) or Creating Liquid Layouts with Negative Margins (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->).I suspected I may have missed something! thanks I'll have a go with this and see how I get on