Posts Tagged ‘#’

CSS divs and IDs

Monday, September 14th, 2009

Div tags are the basic page layout element we are going to use to design our Web site. Each div can be given a unique identifying code, so that it can easily be controlled by a CSS rule. When using ID to control divs, you should remember that only one div with a given ID should appear on each page. If you already have a div “#container” on a page, do not add another div with the same ID.

Selectors for divs with an ID are written beginning with a pound sign: #

#container

Once a div has a rule defining it’s size, placement, color, etc, additional layout elements can be placed inside the div – much like a picture or text box in InDesign.

A good rule of thumb when using divs is to minimize the number of divs used on the page. Order the divs in a logical manner (such as header, then navigation, then content, then footer) and then use CSS rules to control their placement and appearance.