Layout requires different horizontal background for each div


I am trying to create a layout like the one in this picture.

I will use fixed-width sections for the header content and footers and will have a background for each. But then I want to have the site background change depending on the section.

What the best way to go about this? I generally use Blueprint CSS which creates fixed width layouts. Do I have to use a fluid width for what I’m trying to do??

Any suggestions would be helpful…


Assuming that the background outside the header (and the other elements) is to match the height of the header and that you are catering for a fluid height (which you would need to do for text resize anyway) then your only option will be to use 2 divs for every row.

The first div would be 100% wide and carry the background colour and the inner div would be a fixed width centred element holding the content and the inner colour.

You would need to use that approach for all the elements to get your multi-coloured stripe effect.

I tried what you suggested. Problem solved. Thanks!!!