The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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.

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.

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.)

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.

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.

Originally Posted by me

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.

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.

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.

Originally Posted by Hulkur

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

Originally Posted by Hulkur

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).

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.

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.

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:

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 )