A Simple Three Column Layout
Step x-bold text here...In this example, we are going to use absolute positioning to create a three column layout, which is also a very common page layout you will see on the web. This format enables you to follow the widely-adopted convention of placing navigation in a vertical "stack" on the left side, and use the right side for things like testimonials, promotions, ads or other links
In this design, we'll fix the width of the side columns and let the content column fill the rest of the browser's width.
Step 1-No styling yet-this is the default layout.In this example we are going to use absolute positioning to create a three column layout, which is also a very common page layout you will see on the web. This format enables you to follow the widely-adopted convention of placing navigation in a vertical "stack" on the left side, and use the right side for things like testimonials, promotions, ads or other links.
In this design, we'll fix the width of the side columns and let the content column fill the rest of the browsers width.
Step 2-The three divs are now aligned vertically. The navigation div (with its right border in red so you can see where it is) has been absolutely positioned so it is removed from the flow of the document. The right column (with is left border in red so that you can see where it is) has also been absolutely positioned and its right property is set to zero.
Next we will set the margins on the content area so it no longer overlays the side columns.
Step 3- by adding a left margin to the content div that's equal to the width of the navigation and a right margin that's equal to the width of the right column, we have our two columns.
The next step is to do some stylin' and turn the page into a more professional looking layout.
We need to pad the content away from the edge of the divs, change the typeface from boring old Times, and make the navigation look a little more inviting.
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.