CSS Lesson #4
"Visual Layout Options"
This is the start of tableless design, but I won't get too much into that until lesson #5. Just remember: Internet Explorer has a lot of problems with these properties so it'll take a lot of trial and error to get everything to look how you want it to.

I use the <div> tag all the time because it's a very good, multi-purpose tag that divides the page into sections. Just about every CSS property can be applied to it which makes it far better than <span> (which only font formatting works on). <p> is another good one, but you can't nest paragraph tags and it has 10px top and bottom auto margins that you have to remember to remove.

Floats: Floats remain a part of the normal document flow but they are moved either left or right and nearby content is allowed to flow around it.

RULES: Basically the rule is "place floated elements as high and as far to one side as you can" but the details are importnant.

Absolute Positioning: Elements can be placed wherever you want them in the webpage. The property used is position:absolute;

Fixed Positioning: Elements do not scroll with the rest of the webpage. The property used is position:fixed;

Relative Positioning: Elements position this way are always dependent upon the position of the parent element. The property used is position:relative;

Static Positioning: Elements are laid out on the webpage like they are in the source code, which is the default. The property used is position:static;

back to the top

This page was last updated on: