• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Positioning Elements

Chapter 4. Positioning Elements

Since the earliest days of the Web, designers have used tables to create an underlying layout grid for Web pages. This meant adding nasty presentational hacks—such as spacer GIFs, line breaks, and non-breaking spaces—into the markup to achieve the desired layout. With CSS, you can position XHTML elements with great accuracy without adding presentational elements into your markup that pollute the content and make the code difficult to decipher.

With the application of CSS properties, such as margins, padding, and borders, and CSS techniques, such as floating and clearing, you can achieve the same—or even better—results than in the past. You can do this while keeping your markup lean and clean, and while sharing the styles you write between like elements of your layout, to achieve lightweight and easy-to-read code.

How well you succeed with these techniques depends on how well you understand the box model, the position property, and the display property. The box model describes the positioning controls that exist for every element in your markup. The position property defines the positional relationship between these elements on the page. The display property determines whether elements stack or sit side-by-side, or even display on the page at all. Let's look at each in turn.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint