Explanation Lesson #2

Building the Structure

We used the main element on this web page just to be different. Most people don't use it because of its restrictions.

If you want to include a navigation device in the same section of the page you would use:
<div class="main"> in its place.

Only related content goes in the main box element.

Notice that the header, nav, main and footer elements use the float: left property. This gets them to line up properly on the page.

Note too that the width of the header, nav and main elements are reduced to 90% because of the 5% padding that was added to the right and left sides.

The width of the footer is set to 98% because it only uses 1% padding on each side.

The 1% margin is on the bottom of the footer.

That's all clear as mud right now but the more we do it the sooner the light will come on.

The little 'Menu' link that seems to not belong is the beginning of our lmenu which we're going to learn to hide until we get ready to use it.

Oh, the magic of CSS!