I’m Chanpory, and this is my site on how to live and work better as a designer.

You should follow me on Twitter here.

For more, check out the archives.

A visible background grid of columnsKhoi Vinh details how to get accurate alignment on web pages. The technique uses a background image of columns that sits behind all the page elements. The visible columns make it easier to see when elements aren’t lining up, allowing you to precisely make adjustments. Once everything is aligned, you can turn off the background.

Christian Watson of Smiley Cat Design takes Khoi’s technique a step further by incorporating a ruler and finer grid into his background image.

Khoi Vinh’s technique [via Subtraction.com] Christian Watson’s elaboration [via Smiley Cat Design]

buy e books


  • Sean

    gravatarJul 19, 2006
    11:09 am

    Wow. I have a crush on this tip.

  • Kim

    gravatarAug 24, 2006
    2:06 pm

    A lot easier to just use screen rulers and/or line guides, like in the Firefox Web Developer’s Toolbar extension (which also lets you zoom in on a page, for pixel-perfect tweaking). https://addons.mozilla.org/firefox/60/