CSS - Test Your CSS Skills Number 31 : Quiz now ended - Solution in post#33
I know it’s going to be quiet around here on Christmas Week but I thought I’d leave you with a nice little quiz anyway to while away some time.
This quiz is very simple so all levels can have a go. (The last few quizzes have been quite difficult and in fact no one really got the last one perfectly until some clues were dropped.)
Imagine its Christmas Day and you’ve just unwrapped a brand new Iphone and you rush to see how your website displays on this small screen device.
You may be dismayed to find that a 1200px wide layout doesn’t look so good on a 320px width screen.
Therefore your mission (should you accept) is to take a 3 column layout that stretches to full screen on large monitors but when you view it in portrait mode on your iphone there is no horizontal scrolling.
If you didn’t get an iphone for Christmas then don’t worry because I don’t have one either :(. The challenge is basically to take 3 column layout and make it display vertically when the screen is reduced to 320px wide and the content is aligned nicely in one column without the need to scroll sideways.
To clarify further this is basically a test to make 3 columns display vertically as per the screenshots but just in a normal Safari browser (forget about the iphone itself for the quiz).
In case you are thinking that this is too easy then of course there are a couple of rules as usual.
The main rule is that the left and right columns are a fixed width of 316px (approx) and that the centre column must stretch to fill the available space but never be smaller than 316px wide (approx).
As always pictures are worth a 1000 words so look at the three attachments which show a 3 column layout at full width, half width and lastly at 320px width.
You can use your own html and css but it must be valid and must work in Safari of course (and should also work in IE7 - 8, Firefox 3+ and Opera 10 but don’t worry about IE6.)
The same CSS should work for all screen widths so no device dependent media styles to be used.
No scripting to be used either. It’s just valid css and html.
As usual with these 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 have a solution 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.
For those of you who find this task quite easy you may want to try and copy the screenshots I posted and keep the left middle and right columns in the same order as shown (header,left,middle,right,footer) when the screen is squeezed and also to have the html source order the same (i.e. header followed by left followed by middle followed by right and followed by footer - although you can add an extra wrapping element if needed.)
Have fun and have a good Christmas.
PS. : In case you missed the other tests you can find them all listed here: