css - bi-color, flexible, horizontal background "band"

Question

I'm pretty familiar with sites that require "horizontal bands" on their code - even if their content is fixed within the 960px, their backgrounds "extend" to the left and right.

I know how to do those, if they have one single color, or one single image that I can use as background.

Recently a client required one of such bands, with a couple special requirements:

• The band has to be one color on the right and one color on the left
• The colors are programmable; they change depending on the content type

I initially thought about creating background images with all the possible two-color combinations, but the system should basically allow for any two-colors. The color thus have to be specified in html/css not images.

I've tried for a while and so far this has been my best effort:

http://jsfiddle.net/WENu3/

There are several things that I don't like about this setup:

• The container must have a fixed height. Otherwise the left and right bands collapse. I'd rather have the height of the whole thing defined by the content of text.
• I have to add height: 100% to all divs inside container. I'd rather only have to specify that on the bands.
• I feel I need too many divs. In particular, I'm not sure about "content" div is needed.
• There is a 1-pixel difference at the bottom (Chrome and Firefox). I don't know why it happens and I don't know how to fix it.

Is there a more elegant solution to this problem?

Answer 1

You should try using CSS3 gradients instead, this would save you from a lot of unnecessary elements that you define only for styling purposes (this is really bad for the mantainability and strongly discouraged in the modern approach to the web development)

Basically you need a gradient blue from 0 to 50% of the width and red from 50% to 100% applied to an element of 100% width, something like

background-image: linear-gradient(left, rgb(0,0,255) 50%, rgb(255,0,0) 0%);

This is a fiddle example: http://jsfiddle.net/657X4/2/

For more information about gradients support take a look at http://caniuse.com/css-gradients

IE<10 don't support gradients but you could also consider to serve a different style for those browsers as a graceful-not-programmable degradation (e.g. a wide background gif, 50% red and 50% blue in position top center and repeated along y axis)

Answer 2

Try this:

http://jsfiddle.net/WENu3/23/

float the left and right div's. Clear them using overflow:hidden in the container, and set padding-bottom & and minus margin-bottom on the band's. Using this method you never have to set the height of either the content or the band div's. No height = better markup.