Hello class, my names Jeeves and I like pie, tea, and long walks down the beach. I also like CSS, especially when used right. Now, hands up who actually understands CSS Box Model, and positioning? Unless you said no or hesistated, I don't believe you, and getting your head around these little details of technicality is the hardest part of CSS (besides specifity, but thats just math).
Box Model
Box Model is the structure of every element, it accounts for their logistics and layers, and packages it all together in a box. Why some people have trouble with this is probably because its not all inside the box, box model also allows for an area outside the traditional content area, but first, we'll worry about what is in the box.
At the center of your box, you have your content. Text, image, whatever, if its there to be seen its likely its your content. This is the top-most layer of your box. Behind this, you have a background-image (if applicable), and a background-color (likewise). Thats it, three layers, all of which self-explanatory, all of which in the order you'd imagine. This is where it gets hard.
Between the edges of the box and the content, you have padding. If you have a width set on your box, this is the padding, plus the content. Or rather, content size = height/width - padding. Looking at another example, find some used paper. The paper itself would be the background-color (and image?), and on top you have the writing(/images). The gap between the edge of the paper and the writing in the middle would be your padding. Easy.
Padding should be used if you want a gap between your content and the sides of the box, or a gap for the background to show through. If the padding is set to 0, the size of the box will be equal to the size of the content.
Outside the box, you have two more components; margin and border. Border is simply a border around something. It appears around the edge of your box, expanding outwards. So a 200px box with a 2px border (1px each side) would appear to be 202px, because the border sits outside this.
Last, theres the margin. This is perhaps the hardest to understand, as you cannot see it. Margin is a gap outside of the border and box, that doesn't appear, but affects the logistics and positioning of other elements. So you could, for example, use margin to keep a gap between elements. You can also use it to position elements. For example, unless otherwise specified, a block element will occupy 100% width, this means you can fluidly size the element using its margins; its size will be 100% - margins. You can also set the horisontal margins of an element to "auto" to center it. A very easy technique for creating a multi-column layout is by setting a margin on one or both sides of your central content that are big enough to fit the side contents, and position them absolutely in this gap. You can also use negative margins, which is often great for positioning.
Positioning
Positioning in CSS is the last powerful tool you need to understand in order to get layouts to work. Once you know box model you can make sure your elements are as big as you want, with the right spaces in the right places, but unless you want a single column of all elements, you may want to position some.
By default, all elements will be displayed according to their order in the source (position:static), one after the other.
To move an element outside of this sourced flow, there are three other settings you can use for position. Firstly, relative.
Relative is, as you may have guessed, relative to where it would normally be. For example, { position: relative; top: -1em; } would place the element 1em higher than it would normally be. The downside of relative positioning, is it leaves a gap where the element would normally be. In this case, there would be 1em below; its like moving an icon on your desktop; the rest won't move unless you tell them too as well.
Absolute positioning, however, removes an element from the documents source flow entirely, and positions it absolutely, relative to the first positioned parent. If its uncontaned, this will be the root element, <html>, but you can position something absolutely by placing it within a container, and setting a position to it (relative, with no offset works well). If an elements positioned absolutely, it will be exactly where you tell it to be. For example, { position: absolute; top: 2em; left: 93px; } would place the element 2em below, and 93px to the right of its parent/root. Because its taken out of the source flow, everything else ignores it. This makes it easy to have issues with overlapping elements, as they will ignore the box model of the absolute, but it does allow you place things exactly.
Last of all, Fixed is absolute positioning, but relative to the browsers viewport. Thus if you scrolled a page with a fixed element, the fixed will remain where it was positioned on screen, even after everything else has moved up or down.
Fin
Now, I didn't say this would be a good explanation (for that see "Relatively-Absolute" @ autisticcuckoo.net, and the specs box model & the visual formatting model), but I hope some of it makes sense, and people will stop using tabular layouts.
