Understanding the Box Model

Every element that you create in your markup produces a box on the page, so the XHTML page is really just boxes that are stacked and oriented around eachother. By default the border of each element box isnt visible and the background of the box is transparent. With CSS, you can turn on the borders and color the backgrounds of the boxes on your webpage. When you do this, you can see your page structure and layout in a whole new light.

Floating and Clearing

Another technique you can use to organize your layout on the page involves cobining floating and clearing, sing the float and clear properties. Floating an element is a way of moving it out of the normal flow of the document. The clear property enables you to stop elements moving up next the floated element from before. You use these in combination with eachother to do something that you want it do float, then use the clear to make it not float where there is room by the element.

The Position Property

At the heart of CSS based layouts is the position property. This determines the reference point for the positioning of each element box. There are 4 values for the position porperty: static,absolute,fixed,and relative. Static is the default that comes when you dont define what you want done to your boxes. Absolute is alot different from static because this type of positioning takes an element entirely out of the flow of the document. Fixed is similar to absolute besides that the elements positioning context is the viewport, so the element doesnt move when the page is scrolled. Relative uses the properties top,left,bottom, and right to move the box you are talking about without any specific movement.