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
Right Content : This is some content : this is some right content
Right Content : This is some content : this is some right content
Right Content : This is some content : this is some right 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.