Design ideas to overcome dead space

Hi Guys,

I’m interested to hear any suggestions on how I might over come this problem…

On a web site I’m in the process of designing I want to have a footer at the bottom of each page that contains a menu and some contact details. Hopefully you’ll agree the home page looks fine:

However, on a page with a lot of content, I get a load of grey space under the map See here which really doesn’t look good.

What are my options? Make the footer just the width of the left had side? Try and pad the right out with content? Split the footer into two sections?

I know it’s more of a design questions than a technical question, but I’d welcome any thoughts.


Why is it a problem? “Dead” space, or more accurately whitespace, lets a design breathe. Unless you have a reason for putting something in that space, why not leave it be?

Hi Black Max,

Yes, I fully agree that white space can really add to a design and letting elements breathe is a good thing. However, this space in questions looks more like a design error than an intentionally blank area.

Do you not think it’s a big problem then?

Well, you’ve altered the design so the whitespace in question isn’t there any longer in the demo, but no, I didn’t see it as a problem.

Edit: You didn’t change the design, I clicked the wrong link. :blush:

It’s a visual effect inherent in the design.

The impression that “something’s missing” stems from the use of separated boxes against a blank, uncontained background. The boxes appear to be floating in air, and where gaps exist it suggest a void with depth rather than a gap in a flat surface.

I showed a similar design to a client once. They had a very strong reaction against the floating effect and were much happier when the content was clearly contained in one space. Then again, another client reacted strongly against containment, and we moved to a single background colour for most elements so that everything rested on a single plain.

Go to and use Firebug or similar to put a grey background on body. Looks scrappy, uncomfortable, unfinished. Alignments are more distinct. Go back to white and all is well.

I like your design mate. I agree, unless you have a reson to put something there, don’t worry about.

You know what they say, a piece of paper is perfect untouched, the artists job is to make it better.

Black Max thanks for that link - glad to hear it’s a common problem worthy of an article. Not sure I’m technically up to rolling out that solution though.

Unconformed - thanks for your comment. Makes me think I might just see what my client says about it.

Victorinox, I think you’ve hit the nail on the head - definitely a void and not just a gap. I had a play with firebug and ebay and agree if they chnaged their background colour they’d have the same problem, but the white prevents it being an issue. However, I really like the floating box effect - to me the home page looks ideal.

So, I might just leave it and see if the client has an issue (although this may continue to bug me after launch). I was thinking if another fix/cheat would be to position a nested div within the footer that contain’s a white box the with of the rigt conetnt and that’s positioned to the right and slightly above the footer - it would slip behind content and fill the space with white? A bit clunky maybe??