Love the web

Hors d'œuvre

One of our graphic's guys has handed me a bunch of new website designs in Photoshop. Where do I begin the process of building said site? Well, I can tell you I don't begin here. While my intention is to detail a complete website build in a series of articles, I've chosen to begin here (near the end) because this is a often unresolved issue (eg. www.facebook.com and www.blogger.com) that I can't find much documentation on.

The Main

Right, you've laid out your site and it's all looking hunky-dory. Thanks to James' tutorial (a.k.a. the Boy in Baby Blue) you've even got you footer sticking to the bottom of the window like a lead thing. Every browser/platform combo is playing along nicely, but then… hold the phone, what's this? You've just minimised your browser window to 800x600, then slid the horizontal scrollbar across to reveal the overflowing content, and you see your background disappear!

This often occurs when you have a background you want to stretch across the entire width of the screen despite your content being of a fixed width design. For this reason it's most often a header or footer element suffering. Even though you may have tried defining your element as 100% width, it won't help, because that's 100% of the window's width and you want to scroll beyond that to what's outside the window.

This is a little unsightly, and even though the audience who may experience this is small, it can conceivably create accessibility issues‚ think white text floating beyond what was previously a dark background.

OK, don't panic. Put the phone down Russel. A fix is relatively simple to implement. In this example I'll step through fixing the footer in a wee site we built called www.kiwibank.co.nz.

Step 1: whack a div just inside the problematic element (in this case it was the footer) and give it a funky name like 'narrow_display_fix'

<div id='footer'>
    <div id='narrow_display_fix'>
        content goes here…
    </div>
</div>

Step 2: a little CSS to boot

div#narrow_display_fix {
    width: 926px;
    background-color:#eaeaea;
    }

This div has a defined width which matches the width of your content. As soon as a window is narrowed to this width the horizontal scrollbar will appear. It also contains the background colour information required to maintain consistency. You can't scroll beyond it because there's no content beyond it. And when the window is re-widened the outside footer div expands to fill any spaces.

Kiwibank's footer had two elements that were suffering the same issue. Meet #narrow_display_fix and #narrow_display_fix2

Tip: To help visualise things as you do this try changing the background colour to pink or red.

Dessert

The finished footer

I also had to do a little math to maintain the original padding/margin proportions, and there's always a chance (depending on how you've positioned the elements inside your element) that you'll require some IE fixes… but that's another article.