When I haven't CSS in a while though I forget some of the basics - this acts as a short primer to remind me how they work!
The most important resource to use when putting together a page using CSS is the specification. Other important things:
There are two kinds of boxes: block and inline. There are lots of other varieties, but in the end they come down to one of these two. So what's the difference?
Block - These stack vertically, regardless of width. You can use various properties to override this behaviour, but they normally go one-after-another.
Inline - These fit horizontally in one line, wrapping to another line if required. You can not set the width of them, although you can override where they are placed.
With a block box you can:
When you float an element left or right it moves as far in that direction as possible, taking into account the size of it's parent - and any margins, borders, or padding that might affect it. Once it's floated over it's then ignored by all other boxes - they will overlap with it. However the content of all other boxes will flow around it (to the left or right), unless they have the 'clear' property set - in which case they will go below it.
Note:Sometimes if you have two boxes, one floating left, the other right, the result is the right hand box being too low down. This can be worked around by putting the HTML code in the other order, i.e. with the right hand div first.
Inline boxes are containers of normal content. Things like images, the contents of bold tags, and other such elements generate inline elements. If you need to style a particular part of some paragraph you can do it using any element you like, and styling it into an inline.