Test your CSS skills - Number 5 (hardest yet!)
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.
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.
As you can see there is no drop of the cells at small sizes and all cells are equalised with the longest cell accordingly.
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.
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 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.
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 :).
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