CSS - Test Your CSS Skills Number 30 - Multi columns

**Paul O'B** · Nov 22, 2009, 04:39

CSS - Test Your CSS Skills Number 30 : Quiz now ended solutions in post #61

To mark the anniversary of our 30th quiz I have not one but 2 little quizzes to keep you occupied over the following week.

The first quiz was from an idea By Erik J and the second quiz is from an idea by Paul Sweatte. So thanks to both for suggestions and support.

Remember these quizzes are mainly for fun but you will also learn a lot about CSS by trying them even if they don't always prove useful in the real world.

Quiz A - Multi Columns

CSS3 has a nice Multi column layout module but it will be a long time before we can actually use it in all browsers so this quiz is quite simple in concept in that you should turn one unordered list into three columns without using CSS3.

Take a look at the attachment called list-colums.gif to see exactly what is required.

Looks simple doesn't it?

Rules:

There are always rules aren't there?

1) The first rule is that you must use the html I provide and cannot change the html at all although you can change the css in the head of course.

2) Just using valid CSS (not css3) you must replicate the 3 columns as shown in the screenshot and it must work in all modern browsers from IE6 upwards. So make sure you test in IE6 - 8, Firefox3, Safari3 and Opera 10.

You can use conditional comments for IE or the usual valid IE hacks but the code should still be valid.

3)The html is basically one long unordered list (although we have provided a class in each list item to help you) and you need to divide the list into three columns breaking at the relevant points.

The important thing to note is that you must allow for the number of items in each section to change and there could be more or less items in each column. For example I could give you another list with different numbers of items listed and your existing css would need to cater for this.

Effectively this means you can't simply measure each list and then absolutely place it into position - so absolute positioning isn't a solution. The flow of the document should be preserved and the columns should cater for any number of items.

4) The text in each line should wrap to the next line if it is too long which again effectively rules out absolute positioning because the height of the columns would depend on if text has wrapped or not.

Here is the html you must use:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>List Items Divided in Ordered Columns</title>
<style type="text/css">
#columnlist {
    margin:auto;
    width:80&#37;;
    font:75%/1.5 arial;
}
#columnlist h1 {
    font-size:167%;
}
#columnlist ul {
    margin:0;
    padding:0;
}
#columnlist li {
    list-style:none;
    width:33%;
}
</style>
</head>
<body>
<div id="columnlist">
    <h1>CSS2 - List Items Divided in Ordered Columns</h1>
    <ul>
        <li class="col1">Column One, Item 1</li>
        <li class="col1">Column One, Item 2</li>
        <li class="col1">Column One, Item 3</li>
        <li class="col1">Column One, Item 4</li>
        <li class="col1">Column One, Item 5</li>
        <li class="col1">Column One, Item 6</li>
        <li class="col1">Column One, Item 7</li>
        <li class="col1">Column One, Item 8</li>
        <li class="col1">Column One, Item 9</li>
        <li class="col1">Column One, Item 10</li>
        <li class="col1">Column One, Item 11</li>
        <li class="col1">Column One, Item 12</li>
        <li class="col1">Column One, Item 13</li>
        <li class="col1">Column One, Item 14</li>
        <li class="col1">Column One, Item 15</li>
        <li class="col1">Column One, Item 16</li>
        <li class="col1">Column One, Item 17</li>
        <li class="col1">Column One, Item 18</li>
        <li class="col2">Column Two, Item 19</li>
        <li class="col2">Column Two, Item 20</li>
        <li class="col2">Column Two, Item 21</li>
        <li class="col2">Column Two, Item 22</li>
        <li class="col2">Column Two, Item 23</li>
        <li class="col2">Column Two, Item 24</li>
        <li class="col2">Column Two, Item 25</li>
        <li class="col2">Column Two, Item 26</li>
        <li class="col2">Column Two, Item 27</li>
        <li class="col2">Column Two, Item 28</li>
        <li class="col2">Column Two, Item 29</li>
        <li class="col2">Column Two, Item 30</li>
        <li class="col3">Column Three, Item 31</li>
        <li class="col3">Column Three, Item 32</li>
        <li class="col3">Column Three, Item 33</li>
        <li class="col3">Column Three, Item 34</li>
        <li class="col3">Column Three, Item 35</li>
        <li class="col3">Column Three, Item 36</li>
        <li class="col3">Column Three, Item 37</li>
        <li class="col3">Column Three, Item 38</li>
        <li class="col3">Column Three, Item 39</li>
        <li class="col3">Column Three, Item 40</li>
        <li class="col3">Column Three, Item 41</li>
        <li class="col3">Column Three, Item 42</li>
        <li class="col3">Column Three, Item 43</li>
        <li class="col3">Column Three, Item 44</li>
        <li class="col3">Column Three, Item 45</li>
        <!-- number of items can change
    <li class="col3">Column Three, Item 46</li>
    <li class="col3">Column Three, Item 47</li>
    <li class="col3">Column Three, Item 48</li> -->
    </ul>
</div>
</body>
</html>

The answer to this quiz would actually cater for multiple columns so there is nothing special about it being 3 columns only and your technique should work for more columns with a little bit of extra css.

This is quite a tough challenge and it too me a good few hours to come up with the solution.

Remember once you have solved this change the number of items in the list and make sure it still works.

Have Fun

Quiz B - Vertical-align multiple images

This second quiz is from an idea by Paul Sweatte and your task is to vertical-align multiple images within the viewport.

Look at the attachment called vert-align.gif and you will see a screenshot of a wide screen and a narrow screen showing the images centred in both cases.

Although I have used same sized images the answer should cater for images of any size.

Rules

There is only one main rule and that is that you can't use the display:table (or table-cell etc..) properties and the result should work in IE6 - 8, Firefox 3, Safari3 and Opera10.

The code should be valid of course and you can use whatever css and html you like.

As usual with both quizzes don't give the answer away in this thread but PM the answer once you have thoroughly checked your code.

If you think you know the answer then PM it to me as I don't believe anyone who says they can do it but doesn't provide proof

However don't give anything away in this thread although you can ask questions if you are not sure of the rules or what is required.

Remember this is just for fun and there are no prizes other than smug self satisfaction of achievement.

Have fun and I guarantee that quiz A will have you perplexed for a while. Quiz B is more straight forward if you understand the concept but will still prove tricky for some.

Enjoy.

PS. : In case you missed the other tests you can find them all listed here:

**YuriKolovsky** · Nov 22, 2009, 04:57

exciting quiz's once again

now i wonder where i could squeeze out some free time.

**Paul O'B** · Nov 22, 2009, 05:13

Originally Posted by YuriKolovsky

exciting quiz's once again

now i wonder where i could squeeze out some free time.

Thanks Timo.

Yes you will need a couple of hours spare to tackle these

**RyanReese** · Nov 22, 2009, 11:17

Hmm nice quizzes, I'll tackle these after the Ravens kick the Colts' butts

Edit:

Paul can you post the image URL here? Or upload it?

**Rayzur** · Nov 22, 2009, 11:35

Hey Paul,
Why are the last three items in column one (ColumnTwo,16-18) there?

Should they be in column two, or are you just showing them wrapping at will when a certain height is reached. It is kinda confusing seeing ColumnTwo items in ColumnOne.

Maybe they should have just been called "Item 1-45"

**Paul O'B** · Nov 22, 2009, 11:35

Originally Posted by RyanReese

Hmm nice quizzes, I'll tackle these after the Ravens kick the Colts' butts

Edit:

Paul can you post the image URL here? Or upload it?

If you mean the attachments I've also linked to the images in the post.

**Paul O'B** · Nov 22, 2009, 11:40

Originally Posted by Rayzur

Hey Paul,
Why are the last three items in column one (ColumnTwo,16-18) there?

Should they be in column two, or are you just showing them wrapping at will when a certain height is reached. It is kinda confusing seeing ColumnTwo items in ColumnOne.

Maybe they should have just been called "Item 1-45"

Well spotted Ray

My mistake, I adjdusted the number in each column for testing but forgot to change the text itself.

I'll update the images and attachments in a minute.

**Rayzur** · Nov 22, 2009, 11:44

I see it now, the naming error is in the html.

Can we correct that or maybe you can correct the sample code for us?

Edit:

Just read your last post

**Paul O'B** · Nov 22, 2009, 11:47

All images,attachments and html changed now

**ryanhellyer** · Nov 22, 2009, 16:48

Lol. I'm stumped. Every solution I try to come up with for the first quiz is a dead-end

**Paul O'B** · Nov 22, 2009, 17:14

Originally Posted by ryanhellyer

Lol. I'm stumped. Every solution I try to come up with for the first quiz is a dead-end

Yes it's a bit of a puzzle and took me a good few hours to come up with the answer.

Keep trying I'm sure you'll get there in the end.

**Paul O'B** · Nov 22, 2009, 17:17

I have a correct entry for Quiz B from Gary Turner - Many thanks Gary for your speedy and correct entry

I've also had an entry from somebody else for Quiz A but it's not quite good enough.

**kikykuang** · Nov 22, 2009, 21:58

This test is very good, but it seems no time to do it
So there is time to test what I have

**RyanReese** · Nov 22, 2009, 22:03

Quiz 1 I got almost everything done aka column 1 and 3 were in respective places with correct numbesr in place, however column 2 was dropping and I don't have a clue how to get it back into place working everywhere.

**Paul O'B** · Nov 23, 2009, 03:38

Originally Posted by RyanReese

Quiz 1 I got almost everything done aka column 1 and 3 were in respective places with correct numbesr in place, however column 2 was dropping and I don't have a clue how to get it back into place working everywhere.

Yes two columns are relatively easy to do but a different approach is needed when there are three (or more) columns so don't get caught going in the wrong direction

**YuriKolovsky** · Nov 23, 2009, 04:15

i so fail at vertical centering...

**markbrown4** · Nov 23, 2009, 06:10

There is only one main rule and that is that you can't use the display:table (or table-cell etc..) properties

How about the <table> element?

I'm stumped on both quizes - I thought I knew the trick for the second one but it doesn't seem to work as I expected.

**Paul O'B** · Nov 23, 2009, 06:25

Originally Posted by markbrown4

How about the <table> element?

I'm stumped on both quizes - I thought I knew the trick for the second one but it doesn't seem to work as I expected.

Tables are banned

You could do the second quiz with tables of course but that's why I ruled out display:table also.

Keep trying - the answer is out there

**YuriKolovsky** · Nov 23, 2009, 07:46

is the fist quiz a pure elegant solution or a mess of css rules?

as you can guess, im also stumped.

**Paul O'B** · Nov 23, 2009, 08:32

The first solution is quite elegant and doesn't need too many rules. In fact the method only requires two basic rules to achieve the effect although there are more rules needed to make it look right. (The only extra rules were that Ie6 and 7 needed something different and opera needed an extra fix also.)

**RyanReese** · Nov 23, 2009, 09:05

Originally Posted by Paul O'B

Yes two columns are relatively easy to do but a different approach is needed when there are three (or more) columns so don't get caught going in the wrong direction

Yes lol when I was at the current stage in like 30 minutes I was like, am I gonna beat Paul answering this (time frame wise). I have a feeling you went this route in the beginning too

**Paul O'B** · Nov 23, 2009, 09:09

I have a feeling you went this route in the beginning too

Yes I wasted a couple of hours looking in the wrong direction

. There is a certain technique that we all know that makes this work but it's too early to give any more clues than that

**petweis** · Nov 23, 2009, 14:44

sorry folks; it's a colossal waste of time. The average 10 year old can do this in 15 minutes, after having been shown HTML Tables just once. It's child's play. Saying Tables can only be used for tabular date is like saying you can't use a bulldozer to level a derelict building and clear the lot because bulldozers can only be used to doze bulls. And you're supposed to use a bamboo lawn rake - used for creating patterns in sand - instead. And Tables work in every browser ever made; you don't even have to check.

**markbrown4** · Nov 23, 2009, 14:53

Originally Posted by petweis

sorry folks; it's a colossal waste of time. The average 10 year old can do this in 15 minutes, after having been shown HTML Tables just once. It's child's play. Saying Tables can only be used for tabular date is like saying you can't use a bulldozer to level a derelict building and clear the lot because bulldozers can only be used to doze bulls. And you're supposed to use a bamboo lawn rake - used for creating patterns in sand - instead. And Tables work in every browser ever made; you don't even have to check.

Welcome to Sitepoint!

There's always one who misses the point of these quizes. They are for people who enjoy working with css and problem solving. They don't necessarily represent real world examples but you'll definitely learn a few tips and tricks if you persist. Have a look through the older quizes and you'll realise the purpose of them.

**YuriKolovsky** · Nov 23, 2009, 15:48

as markbrown4 already mentioned, these quizzes are here for our expansion of CSS related knowledge and fun.

User Tag List

Thread: CSS - Test Your CSS Skills Number 30 - Multi columns

Thread Tools

Display

CSS - Test Your CSS Skills Number 30 - Multi columns

Bookmarks

Bookmarks

Posting Permissions