Solution Time :
I haven't had any more enquiries on this so I think its time the solutions were posted.
Without further ado here is the link to my original solution. The css layout is on top and a table layout below and as you can see they behave very well together.
http://www.pmob.co.uk/temp/fourcellsboth.htm
Please no remarks about too many nestings or "You should have used a table" etc - that wan't the point 
In case you are wondering how it works - it goes like this. (Take a deep breath):
The key element is a float that contains 3 other inner floats that are the same size as the parent. These will be the 4 cells in our layout.
Each inner float is slid out of the parent by using a 100% negative margin. This creates a telescopic effect where all floats slide out of their parents and eventually fill the 100% width.
If any one of the floats contains more content it will then stretch its parent which will also stretch its own parent and so on. This is the key to the layout and ties all the expansion down to the first parent float.
Around that first parent float we then add three outer floats that contain only background colour at the specified intervals that match exactly the inner floats that we detailed earlier.
When content in any cell is increased the main floats height is increased which also then pushes the three outer elements that contain the colours. In this way we will always get full column colours in the required place.
As mentioned numerous times this method suffers from numerous nestings and a table is the preferred way of doing this.
However the technique is quite useful and you could turn it into a 3 column fully fluid layout that doesn't need background gifs and can have different coloured columns.
Here are some simple examples.
http://www.pmob.co.uk/temp/new3colfluid/3col.htm
http://www.pmob.co.uk/temp/new3colfluid/3col_3.htm
http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm
These are just experiments and I don't offer them as a means to an end but perhaps something to look into and understand. The level of nesting isn't too bad for a 3 column layout and the best thing for the simpler versions of equal columns is that no hacks are required.
The winner in this weeks quiz was Arkkimaagi and here is his code which has some similarities to mine:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>CSS quiz 5 - Arkkimaagi</title>
<style type="text/css">
<!--
.bl{
background-color: #0000FF;
}
.re{
background-color: #FF0000;
}
.si{
background-color: #C0C0C0;
}
.gr{
background-color: #008000;
}
.re{
width: 25%;
}
.gr,.bl,.si{
margin-left: 100%;
margin-right: -100%;
position: relative;
width: 100%;
}
.clear{
clear: both;
line-height: 1px;
}
.inner{
margin-left: -300%;
position: relative;
width: 400%;
}
.inner1{
float: left;
position: relative;
width: 25%;
}
.inner2{
float: left;
position: relative;
width: 25%;
}
.inner3{
float: left;
position: relative;
width: 25%;
}
.inner4{
float: left;
position: relative;
width: 25%;
}
-->
</style>
</head>
<body>
<div class="row">
<div class="re">
<div class="gr">
<div class="bl">
<div class="si">
<div class="inner">
<div class="inner1">content 1<br />
<br />
<br />
long</div>
<div class="inner2">content 2</div>
<div class="inner3">content 3</div>
<div class="inner4">content 4</div>
<br class="clear">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="re">
<div class="gr">
<div class="bl">
<div class="si">
<div class="inner">
<div class="inner1">content 1</div>
<div class="inner2">content 2<br />
<br />
<br />
long</div>
<div class="inner3">content 3</div>
<div class="inner4">content 4</div>
<br class="clear">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="re">
<div class="gr">
<div class="bl">
<div class="si">
<div class="inner">
<div class="inner1">content 1</div>
<div class="inner2">content 2</div>
<div class="inner3">content 3<br />
<br />
<br />
long</div>
<div class="inner4">content 4</div>
<br class="clear">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="re">
<div class="gr">
<div class="bl">
<div class="si">
<div class="inner">
<div class="inner1">content 1</div>
<div class="inner2">content 2</div>
<div class="inner3">content 3</div>
<div class="inner4">content 4<br />
<br />
<br />
long</div>
<br class="clear">
</div>
</div>
</div>
</div>
</div>
<span class="clear"></span> </div>
</body>
</html>
In second place we have Hulkur with his version that only works in Opera7 at the moment but I'm sure he could fix it.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test 5 - Hulkur</title>
<style type="text/css">
.row { width: 99%; clear: both; border-bottom: 2px solid #fff; border-top: 2px solid #fff; }
.c_1,.c_2,.c_3,.c_4 { float: left; }
.box1 { background-color: #f69; width: 100%; margin: 0 0 0 0; }
.box2 { background-color: yellow; width: 75%; margin: 0 -5px 0 25%; }
.box3 { background-color: red; width: 66%; margin: 0 -5px 0 34%; }
.box4 { background-color: blue; width: 50%; margin: 0 -6px 0 50%; }
.c_1 { width: 25%; }
.c_2 { width: 34%; }
.c_3 { width: 50%; }
.c_4 { width: 99%; }
.clear { clear: both; }
/* "hacks" follow */
/* firefox: background color fix */
.box1 { border: 1px solid #f69; margin-top: -1px; margin-bottom: -1px; }
.box2 { border: 1px solid yellow; margin-top: -1px; margin-bottom: -1px; }
.box3 { border: 1px solid red; margin-top: -1px; margin-bottom: -1px; }
.box4 { border: 1px solid blue; margin-top: -1px; margin-bottom: -1px; }
/* IE: height fix */
.box4 .clear { width: 99%; }
</style>
<meta http-equiv="Content-Type" content='text/html; charset="ISO-8859-15"' >
</head>
<body>
<!-- Row 1 -->
<div class="row">
<div class="box1">
<div class="c_1">Cell 1 <br />
Cell</div>
<div class="box2">
<div class="c_2">Cell 2</div>
<div class="box3">
<div class="c_3">Cell 3</div>
<div class="box4"> Cell 4
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="box1">
<div class="c_1">Cell 1</div>
<div class="box2">
<div class="c_2">Cell 2 <br />
Cell</div>
<div class="box3">
<div class="c_3">Cell 3</div>
<div class="box4"> Cell 4
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="box1">
<div class="c_1">Cell 1</div>
<div class="box2">
<div class="c_2">Cell 2</div>
<div class="box3">
<div class="c_3">Cell 3 <br />
Cell</div>
<div class="box4"> Cell 4
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- Row 4 -->
<div class="row">
<div class="box1">
<div class="c_1">Cell 1</div>
<div class="box2">
<div class="c_2">Cell 2</div>
<div class="box3">
<div class="c_3">Cell 3</div>
<div class="box4"> Cell 4 <br />
Cell
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Also worth a mention was dougbtx who provided the first entry for this and his method took a sideways look at the problem and basically shifted content into each cell to math the longest cell. However this meant that you couldn't just add data to one cell only or the layout would break.
However it was very clever and worth a mention
I hope you've enjoyed this weeks quiz and keep an eyeout for the next one some time next week. Next weeks will be a bit simpler so more people can have a go.
Thanks to all those that entered and congratulaions to those mentioned above especially to arkkimaagi's solution which worked more or less as stated (not quite as stable as mine though 
)
Paul
Originally Posted by new guy
Bookmarks