Properly Commenting the end of Div's

1 - Organization of Div's

The Goals
  • placing the comment <!-- end div-name --> at the proper place
  • Knowing what div's enclose other div's
  • The organization of divs and dl classes
  • Knowing what each div class does will be discussed later
  • Knowing what each dl class does will be discussed later
Notes about the sections below
  • section 1 - Goals and Notes
  • section 2 - Summary - Properly Commenting the end of Div's
  • section 3 - Organization of the page-container Div
  • section 4 - Organization of the header, main, and footer Div's
  • section 5 - Organization of the main, navigation, and content Div's

2 - Summary - Properly Commenting the end of Div's

The organization of Div's for Multiflex Pages on layout2.html
  • The layout of the page
  1. div class="page-container"
  2. div class="header"
  3.      div class="header-top"
  4.           div class="sitename"
  5.           div class="nav0"
  6.           div class="nav1"
  7.      div class="header-middle"
  8.           div class="sitemessage"
  9.      div class="header-bottom"
  10.           div class="nav2"
  11.      div class="header-breadcrumbs"
  12.           div class="searchform"
  13. div class="main"
  14.      div class="main-navigation"
  15.           div class="round-border-topright"
  16.                dl class="nav3-grid" (not a div)
  17.                dl class="nav3-bullet" (not a div)
  18.                dl class="nav3-nobullet" (not a div)
  19.           div class="loginform"
  20.           div class="searchform"
  21.      div class="main-content"
  22.           div class="column1-unit"
  23.           div class="column1-unit"
  24.           div class="column1-unit"
  25.           div class="column1-unit"
  26.           div class="column1-unit"
  27.                div class="contactform"
  28. div class="footer"

3 - Organization of the page-container Div

div class="page-container"
  • div class="header"
  • div class="main"
  • div class="footer"

4 - Organization of the header, main, and footer Div's

div class="header"
  • div class="header-top"
  • div class="header-middle"
  • div class="header-bottom"
  • div class="header-breadcrumbs"
div class="main"
  • div class="main-navigation"
  • div class="main-content"
div class="footer"

5 - Organization of the main, navigation, and content Div's

div class="main"
  • div class="main-navigation"
  • div class="main-content"
div class="main-navigation"
  • div class="round-border-topright"
  •      dl class="nav3-grid" (not a div)
  •      dl class="nav3-bullet" (not a div)
  •      dl class="nav3-nobullet" (not a div)
  • div class="loginform"
  • div class="searchform"
div class="main-content"
  • div class="column1-unit"
  • div class="column2-unit-left"
  • div class="column2-unit-right"
  • div class="column3-unit-left"
  • div class="column3-unit-middle"
  • div class="column3-unit-right"
  • div class="column1-unit"
  •      div class="contactform"