A Simple Three-Column Layout
Step 4 - a few styles later. Now the layout looks like someone actually designed it.
- The navigation div has the top and bottom borders set to blue, each with a different line weight.
- The nav links have been opened up and positioned within the div.
- The content has left and right padding to move it away from the edge of the browser.
- The right column div has top and left margins to match it up with the left column, and some padding has been added to keep its content away from the edges of the div.
- The type has some simple styles applied.
This three-column layout works well across a wide variety of browsers. The dynamic repositioning of the right column is a little jerky in IE 5 but works smoothly in IE 5.5 and higher.
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.