1. Technology

Alignment in Web Page Layouts


Most Web developers, when they think of alignment think of the align attribute or the CSS float property or something like that. But the alignment of the elements on your page is just as important as whether your text is justified or your image is floated to the left. Alignment provides the structural framework of a design. The alignment can affect the mood of the page as well as how effective it is at getting its message across.

But page design can be as structured, with a rigid system that is obvious, or it can be more subtle. If you understand how to align elements effectively on your Web page, you'll be able to break the rules effectively as well.

These images show you a Web page with three simple elements and how you can lay out those elements on the page to create different designs. All that is changing in the layouts is where the elements are placed on the page.

Images 1-7 of 7
Flush LeftFlush LeftFlush RightFlush RightCenteredCenteredJustifiedJustified
What's Wrong Here?What's Wrong Here?An ImprovementAn ImprovementMixed Alignment that WorksMixed Alignment that Works
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Layout
  7. Design Principle: Alignment - How Alignment Works in Web Page Layouts

©2014 About.com. All rights reserved.