Приглашаем посетить
Чарская (charskaya.lit-info.ru)

Three-Column Layout

Previous Page
Table of Contents
Next Page

Three-Column Layout

If 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
Three-Column Layout absolute positioning to create a three column layout, which is also a very common page
Three-Column Layout layout you will see on the web. This format enables you to follow the widely-adopted
Three-Column Layout convention of placing navigation in a vertical "stack" on the left side, and use the right
Three-Column Layout 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
Three-Column Layout 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
Three-Column Layout 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.

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.

Three-Column Layout

In a fluid design like this, you have to position the right column with a right value of 0 to make it always position against the right edge of the browser. In a fixed-width layout, you can simply set a high left value to position this column.


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
Three-Column Layout red;}

and here's how this looks. (Figure 5.6):

Figure 5.6. The side columns are now in position.

Three-Column Layout


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
Three-Column Layout 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.

Three-Column Layout


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                     |

(a)Margin to make room for the right column

(1)The new right column

(1)

(1)

(b)Styling for the text in the new right column

The result is shown in Figure 5.8.

Figure 5.8. Simple! Here's the complete three-column layout.

Three-Column Layout


    Previous Page
    Table of Contents
    Next Page