The problem is a little more complicated than the title suggests. I hope that I can adequately explain this tricky css issue. The following Fiddle
should help illustrate it.
I'm looking for the background colour of green and blue to extend fully to the left and right of the page respectively.
This could easily be achieved by setting a percentage on .green
but there is a complication that makes this solution unsuitable. The two divs are wrapped in a containing div called .inner
which has its width fixed to ensure that .green and .blue are always in the centre of the page even if the page zoom setting are changed.
The actual site I'm working on is a mixture of fixed with divs in places (e.g. the main content area is set to 960px) and also 100% width divs (e.g the footer). I can't figure out how to fix the content but have the different background colours extend to the edges of the page.
To my mind the div called .full
should also have background colours and so I've played around with pseudo elements :before and :after in the hope that I could set the background colour of .full
to be both green and blue. This hasn't worked.
Any suggestions? I'm hoping to avoid using a really long background image.