css Dropdown Menus and Navigation Bar Basic Example

Content:

This <body> of this page has been split up into the following divisions:

container
- header
  - masthead
  - navHd
- containerL
  - navVd
  - content
- footer

The container <div> wraps all of the contents of the <body>.

The container <div> is then split up into header, containerL and footer <div>'s.

The header <div> is then split up into masthead and navHd <div>'s.

The containerL <div> is then split up into navVd and content <div>'s.

Note how the container peeks through at several places. To illustrate this more blatantly, copy the source code of this page and change the background color in the #container rule to red (#f00);

Remember: to copy the source all you need to do is click the right mouse button on some text on this page and, in the menu that appears, select "View Source" or "View Page Source," depending upon the browser you're using. You'll then be able to copy and paste the source into your own HTML document.

When you're done with this page, hit the "back" button on your browser to return to the tutorial.

Masthead