Using the div element and the id attribute for page layout
All the work we have done so far has left us with a vertical layout of our web pages.
How do the experts do it? How are they able to have content sit beside each other in a wonderful, colourful layout?
The pros use a combination of the div element and the id selector in both the HTML and the CSS.
The Mighty div Element
The div element gives structure and context to any block-level content in the document. Each div element becomes a generic block-level container for all content within the required start and end tags. As we will see, The div tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence "div") of Web documents.
The id Selector
The id selector is similar to the class selector. The id selector provides us with the opportunity to uniquely target these containers and apply rules to them.
The difference between ids and classes
ids must be unique. Only one unique id per HTML file. If there was an id called footer. It can only be used once as an attribute of the div element.
Classes can be reused on a single page. If there was a class called box, it could be used within several HTML elements with in one HTML file
In the following steps, we use divs and ids to create containers/divisions/boxes for our content. The containers will be:
- header,
- sidebar,
- content, and
- footer
We will add background colors, padding, margins and a few other properties to each of these areas
We will use an external style sheet for your CSS.