Adding a header

Step 1 - add a header div to the markup. The header is the first thing on the page, so if it's the first element in the markup, it can be part of the natural flow of the document.

In the markup, add a div containing a heading element for the text. In the CSS, set the height for the div and color it gray for now so you can see it. Clearly, those side columns are going to have to move down...

Ok, what I did here was I added a wrapper div as suggested in the book. This way by placing the left and right columns, and the content within this wrapper it elimnates having to move the page around when you change the size of the header. What I did was position the wrapper with position: relative; and gave it a width of 700px.

Nulla scelerisque. Sed tincidunt. Quisque eu nisl. Phasellus mi ante, aliquet vel, vestibulum sit amet, consectetuer non, ante. Suspendisse consequat condimentum enim. Morbi vestibulum lorem sit amet enim. Nulla venenatis fermentum purus.

Nunc justo nisl, vulputate in, sagittis in, pretium sodales, magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. Nunc mattis congue leo. Ut diam nibh, mollis at, luctus eget, rhoncus id, elit. Suspendisse potenti. Quisque eget justo rutrum erat placerat pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nunc justo nisl, vulputate in, sagittis in, pretium sodales, magna. Nullam felis diam, bibendum ut, dictum in, tincidunt vitae, magna. Nunc mattis congue leo.