Chanpory Rith
Jul 19, 2006
Khoi 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]



2 Comments
Sean
11:09 am
Wow. I have a crush on this tip.
Kim
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/