A Simple Three Column Layout
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...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel sapien congue lacus fringilla viverra. Duis pellentesque sodales odio. Quisque pharetra aliquam ipsum.
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.
Step 2 - move the side columns down. Either modify the top property or the margin-top property to push the columns down by an amount equal to the height of the header.
In this case, I adjusted the top property of the columns. Now let's style and center the type.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel sapien congue lacus fringilla viverra. Duis pellentesque sodales odio. Quisque pharetra aliquam ipsum.
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.
Step 3 - style and center the heading element. We set a width for the h1 element in the header so we can apply auto margins on each side to center it.
We also use the text-align property to center the type within this centered element, and select a different font for a little variety. The h1 border is temporarily on so you can see the element's position and the text centered within it.
Unfortunately, IE5 doesn't support auto margins, so the header is not centered in IE5 - we'll fix that in our clean-up phase.
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.
Step 4 - cleanup complete. With all the functional issues resolved, we can turn off the styles we used to help us see what we were doing.
The background color is removed from the div, and the box around the h1 element is replaced with the same styles we used on the side columns, with a tiny bit of top padding to center the type between the two lines.
Adding text-align:center to the header div centers the h1 in older version of IE.
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.