css nav

Style the Navigation list

A list is used for navigation because it is good semantics.

The list is wrapped with a div with appropriate id:

Style the list, first remove the default style (bullets)

#nav ul{

list-style:none;

}

then give the list items a bottom border

#nav li{

 border-bottom: 1px dotted #B2BCC6;

}

then style the link as display:block (instead of the default inline, see ).

#nav a{

display:block;

}

CSS layout

• To make the container div at the center of the page:

1. give it width (otherwise it will be Auto or 100%)
2. margin-left:auto;
   margin-right:auto;

• 3 columns layout div:

1. header div is normal with width (or optional width if you use a wrapper div)
   
2. left div has (float:left) (should has width)
   
3. main div (float:left) (should has width)
4. right div (float:right) (should has width)
5. bottom div has clear both (should have height)

Tip: positioning with float, need the elements be in the right order (2,3 can be swapped)