A Simple Two-Column Layout
Step 4 - a few styles later. Now the layout looks like someone actually designed it.
- The top and bottom borders of navigation div are set to blue, each with different line weights.
- The nav links have increased vertical spacing and are better positioned within the div.
- The content has left and right padding to move it away from the edge of the browser.
- The type has some simple styles applied.
This simple "fluid" layout works well across a wide variety of browsers, including IE 5.
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.