I'll start out from the very beginning. Things will make more sense then.
There are two types of elements: Block and Inline.
Block elements are placed on a different line than other block elements. Inline elements are placed on the same line as other inline elements, i.e. images are placed on the same line as text, <b>, and <span> tags. Elements like <p>, <li>, and <div> tags are placed, by default on their own line.
Block elements have a box, which is made up of an element's margins, padding, width, height, and borders. The padding and width and height make up the content area. So, the content area, plus the borders, plus the margins make up the box. The box is calculated like so:
Box width:
width +
left padding +
right padding +
left border +
right border +
left margin +
right margin.
Box height:
height +
top padding +
bottom padding +
top border +
bottom border +
top margin +
bottom margin
By default, block elements' widths are as wide as possible. Example: A div is as wide as it can be with no width specified in CSS. If you add a margin, the margin is placed in first, and then the width is calculated as the width available to the DIV, minus the left and right margins.
Also, block elements are ONLY as tall as the tallest thing inside it. Of course padding, borders and margins add to the box height.
Think of your browser window as a series of logical layers:
1. Window
2. Frame
3. Document Flow (AKA CSS layers)
4. Inline / Floated elements
5. Block level elements (standards browsers create a box for the HTML and BODY elements, whereas IE only creates a box for the BODY element)
When you float a block element, it is removed from the Block element layer (layer 5) and places it in layer 4. Inline elements will wrap around floated elements. Floated elements float next to floated elements.
Floated elements, both inline and block, are removed from the block level document flow. Inline floated elements are removed from the inline document flow.
Floated elements are ONLY as tall and ONLY as wide as the tallest and widest elements inside them. They do not take up space in the block or inline layers of the document flow.
Absolutely positioned block elements are removed from the normal document flow created by the BODY tag and placed in a completely new document flow. That's why absolutely positioned elements float over top of the regular body elements.
Absolutely positioned elements are only as wide and only as tall as the widest and tallest stuff inside it.
Those are some basics. I'd still recommend reading up at the three web sites I highlighted in my first post. Hope this helps :)