Practicing float in CSS 1

Designing a simple html file is pretty easy using Cascading Style Sheets (CSS).

I created a simple html file and label each box with an id and identical color code.

Before getting started I had my CSS file linked in my HTML file.

I selected Left, Middle, Right, Full and Division with pound key in the CSS file (example #left) and colored them with their right assigned color.

The colors helped in seing exactly where all my divs are, and how to get them into the right places.

Change the text color in the sections to white.

Make the section elements ocupy the third right side of the page on top of each other by adding width 33 percent to left, right and middle element.

I used the property Float to make the section elements to be next to each other.

A tricky thing about float is that you should remember to clear them because a float applied to any element in the page will effect every other element after them.

Clear the float and put the overflow on auto to make sure that everything is also stills inside their regular container.

With padding the background colors were estended.

With 20 pixel magin the sections were pushed away with little spacing.

Full element get 100 percent with and covered the whole page.

Division get 20 pixel

Aside 33 percent, 20 pixel and padding 20pixel for spacing then float left for perfect position.

On footer, clear the float and pad with 20 pixels.

Tons of stuff in css.

image added with javascript