The Positioning Building Blocks

Underlying every CSS-positioned page are three basic concepts. Understand these, and you're well on your way to wrestling CSS positioning to the ground. We explain each of these concepts in more detail, but here they are, in their briefs (descriptions, that is):

• The almighty <div> element: HTML contains a special set of tags-<div> tags-for corralling disparate bits of content into meaningful Web page chunks, or divisions (hence the tag name <div>). On their own, <div> tags don't do much. They don't change the appearance of the content they surround, and they don't make anything happen in the browser. Combine <div> tags with CSS, though, and <div> tags obediently do the grunt work of making your layout work.

• The CSS box model: We've heard Web designers refer to the CSS box model as the "layout bread and butter." Here's the basic concept: Think of each heading, paragraph, and <div> element as a box. (We're talking block-level element here, the kind that always starts on a new line and forces a new line to start after it; see Chapter 14 for more information about block-level elements.) Each "box," or block-level element, has four parts:

  • Content area: The amount of space that the actual text, picture, and other <div> element contents occupy on the screen

  • Padding: The space between the content and the borders that gives the content breathing room

  • Borders: The lines on each side of the content-top, right, bottom, and left; content can have borders on any combination of sides or no borders at all

  • Margins: The space between the borders and other block-level elements

  CSS gives you a slew of properties for controlling in minute detail how each side of each part of the box looks. Understand how these properties interact with each other, and you understand how to fine-tune the appearance of each box. Figure 8-1 shows the CSS box model with its parts labeled.

  
  Figure 8-1: The CSS box model.

  TECHNICAL STUFF 

  The CSS box model applies also to inline HTML elements, such as a chunk of text or a word surrounded by <span> tags or a hyperlink. For the purpose of this chapter, we focus on just block-level boxes.

• Document flow: No matter what a page looks like in a browser and despite any fancy CSS formatting and layout, the content sits in a document in a particular order. In the absence of any positioning or fancy formatting, the first item appears in the upper-left corner of the browser, followed vertically by the next item, and the next, and so on down the page. Wherever an element is in the document flow affects what it does and where it goes on the page when you start moving it around with CSS positioning properties.