Ok - Its time for the solutions 
All the correct entries above used techniques from these 2 solutions posted below so I will only show these 2 as they cover all the ground.
#1 http://www.pmob.co.uk/temp/quiz8-4.htm
#2 http://www.pmob.co.uk/temp/quiz8-3.htm
In order to help you understand what's going on here I will run through each demo in turn.
Css from #1:
Code:
* {margin:0;padding:0}
p{margin-bottom:5px;}
body { padding:0 250px; }
#left{
float:left;
display:inline;
width:250px;
margin-left:-250px;
background:#ffffcc;
}
#middle{
float:left;
width:100%;
}
#right{
width:250px;
margin-right:-250px;
float:right;
display:inline;
background:#ffcccc;
}
#footer{
background:red;
clear:both;
margin:0 -250px;
position:relative;
}
First thing you notice is that there is very little code required for this
In this example the space for the left and right columns is made by increasing the body's side padding to match the column widths.
Code:
body { padding:0 250px; }
The next thing we need to do is to shift the float into the body padding section and this we do with a negative margin of 250px.
Code:
#left{
float:left;
display:inline;
width:250px;
margin-left:-250px;
background:#ffffcc;
}
This drags the float fully into the gap made by the body padding. The display:inline is to fix the double margin bug that ie applies to floats that are adjacent to a containers edge (this is documented in the faq on floats so go and read up on it there).
Also when using negative margins in IE it is best to add position:relative otherwise the negative part is often hidden under the background.
The next step is to float the middle section so that it lines up next to the float and this is accomplished as follows.
Code:
#middle{
float:left;
width:100%;
}
Simple enough and self explanatory but remembering that as the body has 250px side padding on the right as well then we still have a space for our third column.
We now float the third column to the right and again use a negative margin to drag it into the space created by the body and thus allow the float to rise up level with the middle content at the same time.
Code:
#right{
width:250px;
margin-right:-250px;
float:right;
display:inline;
background:#ffcccc;
}
Its exactly the same technique we used for the left column so needs no further explanation.
Lastly we place the footer underneath.
Code:
#footer{
background:red;
clear:both;
margin:0 -250px;
position:relative;
}
We simply use clear :both on the footer to make it clear the floats but that only lets the footer sit in the middle of the page. Therefore we apply negative margins to the left and right sides to drag the flooter to be 100% wide and finish the layout off nicely
CSS from #2:
Code:
* {margin:0;padding:0}
body{padding:1px;}
p{margin-bottom:5px;}
#left{
float:left;
width:250px;
background:#ffffcc;
margin-right:-250px;
position:relative;
left:-1px;top:-1px;
}
#middle{
float:left;
margin:0 254px;
display:inline;
position:relative;
top:-1px;
}
#right{
width:250px;
float:right;
margin-left:-250px;
background:#ffcccc;
position:relative;
left:1px;top:-1px;
}
#footer{
border-top:1px solid #000;
clear:both;
background:red;
position:relative;
margin:0 -1px;
}
In this example the space for the left and right columns is produced not by using padding on the body but by applying margins to the middle element instead.
Code:
#middle{
float:left;
margin:0 254px;
display:inline;
position:relative;
top:-1px;
}
Ignore the relative position tweaks for the moment as they are merely a fix to stabilise IE.
The element is floated without a width but has 250px margins on either side. This basically gives you a centred float but won't allow for any content to be alongside because the margins at the side will stop that.
To make our left and right floats slide into that margin then we use another negative margin technique but this time we apply it to the opposite side to the direction in which the element is floated. So for a float:left we apply a negative right margin equal to its width and vice versa for a float:right
Code:
#left{
float:left;
width:250px;
background:#ffffcc;
margin-right:-250px;
position:relative;
left:-1px;top:-1px;
}
#right{
width:250px;
float:right;
margin-left:-250px;
background:#ffcccc;
position:relative;
left:1px;top:-1px;
}
What this in effect does is make the floats width appear to be 0px wide. An elements width is the sum of its width + padding + border +margin and in this case that equals : 250 + 0 + 0 + -250 = 0
Therefore we have a floated element that appears to be 0px wide in theory but because the overflow is visible then it looks on screen as though it is 250px wide as normal. However now that it is only 0px wide then it can slide all the was up next to the middle section because it will have no effect on the overall width of that section.
You can think of the negative margin on the reverse side of the float as a means to let other content encroach on that float by the amount of the negative margin you have applied.
In our left and right floats we have allowed the middle section to act as if the floats weren't there but in order to stop any overlap we have added the margins to the middle section as described earlier.
This may be a difficult concept to understand and the best way to learn is to go and play around with the code until you understand what is happening. It is a useful technique but should be used carefully and sparingly as it uses undocumented behaviour to some extent although according to my reasoning it seems to follow the theory quite well.
The last thing we do is place the footer and this is just accomplished with clear:both. I mentioned earlier about the odd 1px relative positioning that was applied to some elements and this was to fix an overlapping bug in IE which was fixed by adding 1px padding to the body.
This of course left a 1px gap which I didn't want to I shifted everything back by 1px using relative positioning so as not to really change anything at all.
So to recap:
- position:relative is useful for keeping the content visible when negative margins are used.
- display:inline is used to cure the double margin bug in IE without harming other browsers.
- a negative margin on the same side as the direction the float will move the float completely in that direction (e.g. float:left;margin-left:-250px)
- a negative margin on the opposite side of a float will not move the float at all but allow content to encroach on the float by the amount of the margin applied. (e.g. float:left;margin-right:-250px)
Should you use these techniques in your layout?
That's quite a hard question to answer and usually I would say there is no need because the above layout can be accomplished by more normal means. However there will be occasions when it comes in handy and understanding the way things work is usually 99% of the way in solving the problem.
You should note that older mozilla does not like negative margin techniques on floats where the float is taken completely out of its container. Although it will work it will lose any influence on the design because (I guess) mozilla assumes that if its 0px wide then it is 0px high also and ignores it. newer versions are fine.
If you look at my 3 col demo you will see i use a similar technique for the columns but I also ensure there is a 1px overlap to cater for these older browsers.
That's about it Any questions post below and I will try to answer them.
I hope you enjoyed this quiz. Look out for the next one in a couple of weeks time.
Originally Posted by Paul O'B
Can't wait for the solution though 
Dan Schulz you will be missed 
Bookmarks