Three-Column LayoutIf creating a two-column layout makes sense to you, then you won't have any trouble understanding how to transform it into a three-column layout. In this case, you use the same markup structure as you did for the two-column layout, but you add one more div for the right column at the end <body> <div id="nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> <div id="content"> <h1>A Simple Three Column Layout</h1> <p><strong>Step x - bold text here...</strong> 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.</p> <p>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.</p> </div> <div id="rightcolumn"> <p>This is temporary filler for the right column. We'll put something more interesting in here later.</p> </div> </body> The unstyled code looks like Figure 5.5. Figure 5.5. Here's our unstyled markup for a three-column layout.Because the content for the right column is styled as a paragraph, when it is displayed in the browser, it simply appears as another line of text in the unstyled layout. The next step is to position the two side columns absolutely: the only difference between the two columns in the way you do this is that the left column is positioned with the left:0px; style and the right column is positioned with the right:0px; style.
Here's the markup body {margin:0px; padding:0px;} div#nav {position:absolute; width:150px; top:0px; left:0px; border-right:2px solid red;} div#rightcolumn {position:absolute; width:125px; top:0px; right:0px; border-left:2px solid red;} and here's how this looks. (Figure 5.6): Figure 5.6. The side columns are now in position.I made the inner borders of the columns red so you can clearly see where the columns ended up. I also changed the text in the right column. The next step is to set the left and right margins on the content area so it doesn't overlay the side columns body {margin:0px; padding:0px;} div#nav {position:absolute; width:150px; left:0px; top:0px; border-right:2px solid red;} div#content {margin-left:150px; margin-right:125px;} div#rightcolumn {position:absolute; width:125px; top:0px; right:0px; border-left:2px solid red;} Now the positioning work is done (Figure 5.7). Figure 5.7. With the left and right margins set on the content area, the three-column layout is ready for some cosmetic styling.For this layout, I use exactly the same set of CSS rules as I did on the two-column layout, except for the changes highlighted below. Here is the CSS of the three-column layout styled to a more finished level body {margin:0px; padding:0px; font: 1em verdana, arial, sans-serif;} div#nav {position:absolute; left:0px; top:0px; width:150px; padding:.5em 0 0 0; margin:22px 0 0 15px; border-top:2px solid #069; border-bottom:1px solid #069;} div#nav ul {margin-top:0; margin-bottom:.8em;} div#nav li {margin-bottom:.5em; font-weight:bold; font-size:.75em;} div#content {margin:20px 150px 0 165px; padding: 0 1em;} <-- a div#content h1{font-size:1em;} div#content p {font-size:.8em;} div#content li {font-size:.75em;} div#rightcolumn {position:absolute; width:125px; top:0px; right:0px; <-- 1 margin:20px 15px 0 0; padding:1em .5em; <-- 1 border-top:2px solid #069; border-bottom:1px solid #069;} <-- 1 div#rightcolumn p {font-size:.75em;} <-- b |
The result is shown in Figure 5.8. Figure 5.8. Simple! Here's the complete three-column layout. |