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.

Threaded View

Test your CSS skills quiz #8

Hi,

The Search for the Holy Grail :
I had some spare time so I devised another quick quiz that shouldn't tax you too much . This time I want you to create the famous "holy grail" 3 column layout.

The left and right columns are 250px wide and touch the viewports side edge on both sides. The middle column merely fills the space between these 2 columns as required. Then of course we have the obligatory 100&#37; wide footer that spans all 3 columns at the bottom and must stay below all columns irrespective of the content in each column. (That means absolute positioning is out of the question).

One of the problems you may encounter is that the footer will jump up over one of the columns at some screen widths. Therefore you must test at reasonable widths to ensure that the following doesn't happen:
bad layout

There is nothing special about this layout and I am not looking for 100% high or equalising column layouts and therefore you may be wondering that this is going to be very easy

However as usual, there is a catch and the catch is that you have to use the html that I provide. You cannot alter the html at all and the layout must be created by manipulating the css alone. You cannot add extra classes or id's to the html content and must use what is already there.

Here is the html provided and I have even been generous in providing you with some css to get started. You don't have to use this css and you can change it or add to it as you like but it does happen to reflect some of the css I used which may help you. You can add as much css as you like although the answer is relatively short anyway.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Holy Grail Quiz</title>
<style type="text/css">
* {margin:0;padding:0}
p{margin-bottom:5px;}
#left{
float:left;
width:250px;
background:#ffffcc;
}
#middle{
}
#right{
width:250px;
float:right;
background:#ffcccc;
}
#footer{
}
</style>
</head>
<body>
<p id="left">This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is
the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This is the left content: This is the left content This
is the left content: last word.</p>
<p id="middle">This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center
content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content
: This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : This is the center content : last word. </p>
<p id="right">This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This
is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content
: this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : This is the right content : this is the right content : last word:</p>
<p id="footer">This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the
footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : This is the footer : This is the footer This is the footer : </p>
</body>
</html>

Remember though that the html content cannot be changed. However you must allow that extra content could be added to any column and the layout must still work.

Some of you will know the answer to this straight away so please PM me your answer and do not post in the thread and spoil it for others. There are no prizes but I will announce the first correct entries that I receive to give you lost of Kudos. The test sounds very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions.

You cannot alter the html and you can only use valid css2.1 to achieve the result (no javascript or browser tricks just valid css2.1).

The resulting layout should work in ie6+ and firefox 1.5+ and Opera 9+ which may give you a clue that we are not looking for advanced css this time.

General Rules:
No frames or iframes
No javascript or scripting of any kind
No image alteration
No expression,conditional comments, behaviours etc.
Use Valid CSS 2.1
Use Valid xhtml
Must work in Firefox and Opera
No outright hacks (* html or html>body however things that are normal in all browsers such as position:relative are fine)
No finding loopholes - I'm sure you all know what I mean lol

As usual there are no prizes other than the self-satisfaction of completing this. If you have a the answer then post a message here but PM me the solution so that other people can still have a go. I will post the winners and their solutions later.

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.