Horizontal background extending on fixed width sites

Often when building a fixed width website, there are blocks of content whose backgrounds should extend horizontally beyond the fixed width area. Footers are a good example of this, but there are other cases as well.

There are a few ways to go about achieving this: wrapper divs, a mess of absolute and relatively positioned elements… or there’s a nice little CSS hack using the :before pseudoclass.

#myblock    /* Main content block */
{
    width: 940px;
    margin: 0 auto;
    background: steelblue;
    height: 200px;
}

#myblock:before    /* The pseudoclass hack */
{
    position: absolute;
    width: 100%;
    left: 0;
    background: steelblue;
    height: 200px;
}

A few things to note:

• The block must have a fixed height, otherwise the :before extensions won’t match the main content height.
• The content block must not be position relative, otherwise the absolute positioning of the :before pseudoclass won’t work properly.
• This works in IE8+, Firefox, Chrome, Safari… IE7 and lower have no support for the CSS :before pseudoclass.
• This is best suited for solid colours. A tiling image should be okay too. A background image at a specific location in the content block will probably incur z-index problems.
  For most browsers, this can be fixed by setting the :before pseudoclass to have a z-index of -1, but this will not work in IE8. There doesn’t appear to be a solution for this problem.

Reflections

Firstly, we survived and we are awesome. There are few things better than seeing 5 groups send files back and forth over wireless modems on a protocol we designed and then being told that you are the first group in 20 years to accomplish that.

What was interesting for me (between periods of frantic bug hunting) was watching how people worked, how they tried to solve problems, and how they handled things going wrong. From watching that, I’ve realised some things.
I need to be less… controlling about things. I try to always be open to new ideas and new methods, but I always try to ensure that everything is done the way I would do it. This leads to other people feeling useless, and me reaching the point of burnout from trying to do everything. I will always have a need to know how the project as a whole works and how all the pieces fit together, I’m definitely not one for blackboxing. But I need to trust other people to do things, and trust that they can be help responsible for what they’ve done.
Almost as importantly, someone needs to hold me to similar standards. There should be debate about how to do something, and someone’s idea should not be used simply because it’s easy, or it sounds good. I should need to prove my reasons to people before I’m simply given the freedom to implement it.

Those of you who felt like you couldn’t contribute anything, or (worse) those of you who got stuck writing documentation at the last minute: Don’t let me do that to you again.