Test your CSS skills - Number 5 (hardest yet!)

[Paul O'B]

Hi,

Test your CSS skills - Number 5

Due to demand I have come up with what I think is the hardest test yet and I'll be surprised if anyone can come up with a solution (now there's a challenge for all you experts ).
Take a look at the link below which shows a simple table layout.

http://www.pmob.co.uk/temp/fourcellstable.htm

There are 4 cells that take up the 100% width and each cell will expand in height and equalise with the cell that contains the most content. The background colour will expand to be consistent with the longest cell. I have put the longest text in each different cell so that you can see the full effect.

While this is a simple job to do in tables it has previously been though almost impossible to replicate with css alone. However after a bit of thought (and 2 hours hard work) I've produced the table layout precisely with all its characteristics. Don't get excited too much though as the layout is probably too convoluted to use in the real world.

Here are some images to show how the table layout and the css layout compare.

http://www.pmob.co.uk/temp/fourcellsimages.htm

As you can see there is no drop of the cells at small sizes and all cells are equalised with the longest cell accordingly.

• Rules:
  Four cells of 25% each (approx - I'm not worried about a couple of pixels here and there)
• The layout must not break unless the layout is very small.
• The same css is to be used for every row. You can't hard code each longest cell by any means. (You should be able to put any amount of text in any cell without altering the css or html to take account of it.)
• No frames or iframes
• No javascript or scripting of any kind
• NO TABLES
• No inline styles
• No images
  
• No expression,conditional comments, behaviours etc.
• Use Valid CSS
• Use Valid xhtml
• Must work in Firefox and ie6 exactly the same as my example above. You won't be able to use display:table-cell etc as IE6 doesn't understand that.
• No hacks, no child selectors, no universal selectors, no means of offering separate code to each browser. The same code must work for both browsers.

There are no prizes other than the self-satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example will suffer from divitis i'm afraid and won't make much sense if css is turned off but that's not the point of this exercise anyway.)

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
test 4: http://www.sitepoint.com/forums/showthread.php?t=171221

[The New Guy]

If only display: table; would work in IE

[mofo]

Almost got it. Just that it looks bad when I resize the window.

[Paul O'B]

If only display: table; would work in IE

Now that would be too easy lol

Almost got it. Just that it looks bad when I resize the window

Keep trying - If you want you can PM me with what you've got and I'll tell you if you're on the right track or not (without giving any clues away ).

Anyone else got any ideas?

I told you it wasn't easy lol

Paul

[daniel_eastley]

I'm a little confused as to why you would want to turn this into CSS only. - this is not a dig at the competition, just a general enquiry.

From what I've heard, (i could be wrong), you shouldn't be using tables to control layout, only display tabular data. but this is generally not a layout thing, it is, in my oppinion a table of data.

I think people in general (me included), try to remove tables entirely from a site, even in cases like this.

Why would it be beneficial to remove the table in favour of css in this situation. when a simple table set of html tags with no layout attributes and a simple class/id attribute for the table..then css to control the visuals would be perfectly ok.

:-) Dan

[Paul O'B]

Hi Daniel,

I'm a little confused as to why you would want to turn this into CSS only. - this is not a dig at the competition, just a general enquiry.

If you read the first post you will see that i mention a number of times that these are exercises in using css and nothing to do with semantics or layout.

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example will suffer from divitis i'm afraid and won't make much sense if css is turned off but that's not the point of this exercise anyway.)

These tests are purely to test the knowledge and skills of using css and are not meant to be valid reasons for using css for the tasks specified.

However what you will gain from trying to do the impossible is that you will learn many techniques that can be applied in different situations.

A table is best used for tabular data and of course there would be no point in using css for this as a a table has got it covered.

But if I changed the test to be make a table with a table it wouldn't be much of a test now would it

These tests are all about thinking how css works and how it can be applied. This test is specifically difficult and that was the only reason I chose the table test.

This is not a "how to" or "should do" but is it "possible to do".

Hope that makes it clearer

Paul

[daniel_eastley]

yup a lot clearer. Thanks :-)

[Paul O'B]

Hi,

Dougbtx (Doug Livingstone) is in the lead so far with the closest solution, but it's not close enough to win yet unless any of you can beat him to it .

I'll give you one clue in that the solution requires a lot of nesting (unfortunately - otherwise it would be a valid alternative to a table). Of course there may be other ways to do this apart from my method (but I don't think so).

You need to think how you can expand the other cells when one cell expands. How can it affect the other cells?

That's all the clues for now but if no-one's getting near or on the right track then I may start dropping hints during the week.

Remember that any cell should be able to contain the most (or any amount of) text without changing the css or html to reflect the change.

Thanks to those who have already PM'd me and keep trying

Paul

[Arkkimaagi]

I found a solution, and PM'd Paul about it. We'll see if he accepts it.

It's not pretty, but IMHO it can do what Paul described.

[Hulkur]

Done in 15mins.
Works only in Opera (i love the browser)
now i just have to hack IE and Moz

code is valid, browsers are not - when will it end ?

[Paul O'B]

Hi,

Arkkimaagi:

I'm going to be a bit picky here before I declare a clear winner as I was looking for the content in any cell to be increased without having to change any other css, html or content in other cells to match.

At the moment you are in second place behind Doug and funnily enough both of you have used more or less the same solution.

To anyone else who is still trying this you must ensure that any cell can have more content without having to change the CSS, the html or any other content in any other cells.

I want to be able to go to a cell and type a line of text in and have it render correctly straight away as though it was dynamically entered.

Done in 15mins.
Works only in Opera (i love the browser)

Display:table-cell is not allowed (if that's what you were using ) as that would be too easy

now i just have to hack IE and Moz

No hacks allowed I'm afraid The same code must apply to both browsers Ie6 and Moz. (You can PM me your solution if you want to know if you're on the right track or not.)

I'll keep this open for a few more days to see what you can all come up with. (Some of you are very inventive).

Thanks for all the entries so far

Paul

[Arkkimaagi]

Ok, lets see now if I got it nailed.

[Paul O'B]

Ok, lets see now if I got it nailed.

You certainly have - You are the Winner

Well done - your solution does exactly what I wanted

Any cell can be the longest just by typing in more content without changing anything else. The columns all automatically expand to accomodate as per the table example.

Congratulations, I didn't think anyone was going to get this. I won't post the solution just yet in case some others are in the middle of trying this. I'll post the solution and links tomorrow (or Friday).

If anyone else is still trying this I'd still like to see your solution in case there's another way to do this. Arkkimagi's solution was similar to mine and both solutions look a little ugly lol.

Paul

[Hulkur]

Display:table-cell is not allowed (if that's what you were using ) as that would be too easy

This was done in 5mins And yes, it would be too easy (and it works only in opera, don't remember about firefox)

No hacks allowed I'm afraid The same code must apply to both browsers Ie6 and Moz. (You can PM me your solution if you want to know if you're on the right track or not.)

No hacks as generally known.
Just things like border around div so that firefox would show background correctly etc.

I got it working on opera and IE, firefox is still avoiding me.
I'll send it in to get comments at least.

[Paul O'B]

I'll send it in to get comments at least.

Great - I'll look forward to it

[Paul O'B]

Hi,

Just had another great entry from Hulkur which works perfectly in Opera 7 however ie6 and firefox aren't exactly playing ball yet but I'm sure he can fix it

Good work and thanks for making the effort

Paul

[Paul O'B]

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:

<!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>&nbsp; </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.

<!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

[The New Guy]

Boo! negative percentages Good job though, tough one.

[Kilroy]

Now make thread number six so I can participate

[Paul O'B]

Boo! negative percentages Good job though, tough one.

Cheers

Now make thread number six so I can participate

You'll have to wait until Monday I'm afraid

Paul

[Kilroy]

Thanks Paul, looking forward to it!

[Octal]

I couldn't do this one, in fact I am still trying to figure out the how-it-works bit, however I finally understand 'divitis'

[ro0bear]

(I have been going through the challenges)

This seems to work well in all the browsers I have tested it in (including IE6!)....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ro0bear</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {margin: 0; padding: 0;}
.pink {background-color: pink;  padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 0; z-index: 0;}
.yellow {background-color: yellow;  padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 24.9%; z-index: 0;}
.red {background-color: red; padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 49.8%; z-index: 0;}
.blue {background-color: blue;  padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 74.7%; z-index: 0;}
.container p {width: 24.9%; float: left; margin: 0; z-index: 1; padding: 0;}
.container {position: relative; margin: 0; padding: 0; width: 100%; border: 1px solid white; overflow: hidden; z-index: 1;}
.bottom {position: relative; padding-bottom: 1000%; background-color: white; width: 100%; z-index: 1;}
#outercontainer {position: absolute; width: 100%; margin: 0.5em; padding: 0;}
</style>
</head>
<body>



<div id="outercontainer">

<div class="pink"></div>
<div class="yellow"></div>
<div class="red"></div>
<div class="blue"></div>

<div class="container">
<p>This is cell 1 with the most text: This is cell 1 with the most text</p>
<p>This is cell 2 : This is cell 2 :</p>
<p>This is cell 3 : This is cell 3 :</p>
<p>This is cell 4 : This is cell 4 :</p>
</div>

<div class="container">
<p>This is cell 1 : This is cell 1 :</p>
<p>This is cell 2 with the most text: This is cell 2 with the most text</p>
<p>This is cell 3 : This is cell 3 :</p>
<p>This is cell 4 : This is cell 4 :</p>
</div>

<div class="container">
<p>This is cell 1 : This is cell 1 :</p>
<p>This is cell 2 : This is cell 2 :</p>
<p>This is cell 3 with the most text: This is cell 3 with the most text</p>
<p>This is cell 4 : This is cell 4 :</p>
</div>

<div class="container">
<p>This is cell 1 : This is cell 1 :</p>
<p>This is cell 2 : This is cell 2 :</p>
<p>This is cell 3 : This is cell 3 :</p>
<p>This is cell 4 with the most text: This is cell 4 with the most text</p>
</div>
<div class="bottom"></div>
</div>



</body>
</html>

*waits to hear where it goes wrong...*

ro0bear

[Paul O'B]

Good thinking ro0bear using absolute columns to make the colours

That seems to work well and is neater than the original. Glad you are still having fun with these.