Chanpory Rith
Jul 19, 2006

Comment

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]

Sponsorship
If you've got a product or service that you'd like to promote on LifeClever, click here to find out about our advertising opportunities.

2 Comments

  • 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/

Leave a Comment




LifeClever is a career guide for designers. My goal is to help you create, work, and live better as a designer. Go ahead, grab the RSS feed or send me a love letter. ;-)