About this Lesson ...
This is a progressive lesson which will proceed through the steps to create a robust two-column fixed-width layout with a header and a footer.
When finished, this page will have two columns with a header and a footer. The left column will contain the navigation for the page, and the right column will contain the main content of the page. Here's an advanced look at the
completed page
The safest, most reliable way to approach this problem is to float both columns. The page has one 'wrapper' DIV named "container". The container DIV is a child of the BODY element so it will contain the various parts of the document: the header, a narrow left column for navigation, a wide right column for the main content of the page, and the footer. The container DIV allows us to fix the width of the page and to center the page within the browser window.
The container DIV wraps around four other boxes that contain the four parts of the document: the header, the navigation, the main content, and the footer.
- The header is contained in an H1 element;
- the navigation is contained in a DIV named "nav";
- the main content of the page is contained in a DIV named "content";
- the footer is contained in a DIV named "footer".
The H1 element and the three DIVs will be used to provide context to selectively style the elements within the header, left navigation bar, the main content, and the footer, respectively.
You may be wondering why I hadn't created a DIV to style the elements in the header. Although DIVs are extremely useful for encapsulating logical parts of a web page, they can be overused, just like classes can be overused. Since I know that the header only contains text and requires no other block elements, I chose to use the H1 element to target all the styling of the header. Surrounding the single H1 element with a DIV would have been superfluous in this case, and by targeting the H1 in this simple design, I have simplified the markup.
Similarly, for this design I could have used a P tag rather than a DIV to contain the footnote. However, since I won't be saving any markup by using a P tag instead of a DIV, I chose to use a DIV to provide the greatest flexibility for expanding the footnote at a later time. The DIV allows me to add any number of additional block-level elements to the footer later, whereas a P element would not.
In this design, I've only used the H1 tag to define the header for the page. If I had used H1 tags for other parts of the document, I would have assigned an ID to the header H1 tag to eliminate conflicts with the H1 styles for the header and H1 styles for other parts of the document.
The following selectors will be used to style the page:
body { }
#container { }
h1 { }
#nav { }
#nav ul { }
#nav li { }
#content { }
#footer { }
h2 { }
a:link { }
a:visited { }
a:hover, a:active { }
The following lesson pages double as the example specimen for the lesson. This means that the following lecture pages will not be formatted like this lecture page; rather, the first page in the lesson will start relatively unformatted, and each subsequent page will add more and more styles as we continue to develop the design.
Navigate through each page in the lesson using the Previous | Next links in the navigation column of the following pages. You can also jump back to the course schedule using the Schedule link in the navigation column. All the other links in the following pages are inactive.
Let's proceed to the
lesson
...