Left Content : This is some content : this is some content

Left Content : This is some content : this is some content

Left Content : This is some content : this is some content

Left Content : This is some content : this is some content

Middle content :

The width on the left and right content is 20% of the whole window and is made by setting 20% left and right margins on the #middle element.

However because we are floating th #left and #right elements from the middle element which is now 60% wide (20% + 60% + 20% = 100%) we need to make the left and right floats 32%. If we specified 20% we would only get 20% of the 60% width of the middle element

Although this sounds complicated a little trial and error soon solves the problem or if you're good at maths you can work it out properly

3 colours are achieved by using a background gif for the left column and repeating it on the y-axis. However because the columns are now fluid the background will show through on the right column if the window is made small enough.