This basic two-column layout is achieved using absolute positioning. It consists of a narrow left column for navigation links. It is contained in a DIV named nav. The right column is for the rest of the content. It is contained in a DIV called "content".
Below is the HTML markup for the example document used in this lesson.
This
EXAMPLE
shows how the HTML markup renders before we apply layout properties to it.
Try it!
Copy
this markup
and make your own two-column layout.
Follow along with this lesson to generate your basic two-column layout.
<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>
<li><a href="">link 4</a></li>
<li><a href="">link 5</a></li>
</ul>
</div>
<div id="content">
<h2> Basic 2 Column Layout</h2>
<p>
<strong>Default Layout </strong>Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Donec iaculis
felis. Sed pulvinar diam et nulla. Praesent mauris
risus, lacinia in, consequat et, adipiscing ut, leo. Morbi
neque ante, pharetra et, pulvinar ac, facilisis a, augue.
Donec sagittis tortor eget libero fermentum dignissim.
Fusce et ipsum. Nullam vel sapien nec pede luctus fermentum.
Ut feugiat, leo non mattis gravida, felis dui mollis nunc, non
auctor diam nisi interdum nisl. Sed a tortor in erat porta
laoreet. Donec tempus accumsan lorem. Proin turpis risus,
pellentesque a, risus.
</p>
<p>
Sed aliquet. Curabitur a est. Sed in enim. Quisque hendrerit
vulputate imperdiet ipsum. Nam laoreet mauris sed risus.
vitae arcu. Mauris at mauris. Praesent elit eros, accumsan a,
Morbi magna neque, luctus vitae, interdum quis, ultricies et,
ulamcorper diam.
</p>
</div>
Step 1: Positioning the Navigation
Reset the BODY margins to 0. This removes any browser default margins for the BODY element, and allows us total control in positioning our elements relative to the BODY. Position the navigational links absolutely to break them out of the flow of the document. A width is set and a right border is temporarily applied to verify positioning.
Setting a temporary background color is a good idea when designing a page so you can easily see the boundaries of your layout elements! Sometimes, content may obscure background color, so an alternative is to set temporary borders. However, since borders add space to the visible element box, their presence may "throw off" the layout. Just something to be aware of.
Set the LEFT and TOP of the navigation DIV to zero so that the
top left corner is aligned with the top left corner of the containing element (BODY).
Note that when this element is absolutely positioned,
it (and the space it occupied) is removed from the normal flow of the document.
EXAMPLE
body { margin: 0px; padding: 0px; }1
div#nav { position: absolute;
width: 150px;
border-right: 1px dotted red;2
left: 0px;
top: 0px;
}
1remove default settings
Step 2: Positioning the Content
The content is now the first element in the normal flow of the document since the navigation has been positioned absolutely. Set the left margin of the content DIV to move the content to the right so it won't be on top of the nav DIV.
Note that all of the values given are adjustable depending on your design.
EXAMPLE
div#content {
margin-left: 150px;
}
Step 3: Presentation
Now the fun begins! Once you have the columns set up, you can use all the other CSS you know to bring interest and richness to your design. Here are some ideas to get you started:
- Set the BODY font and size.
- Adjust the spacing of the navigation links.
- Add a rule(s) to highlight the links.
- Style the links.
- Adjust spacing and padding in the content.
- Style the content.
- Once the testing is complete, remove the red testing border.
body {
margin: 0px; padding: 0px;
font: 1em comic sans ms, helvetica, arial, sans-serif;
}
div#nav {
position: absolute;
width: 150px;
border-right: 2px solid red;1
left: 0px;
top: 0px;
padding: .5em 0 0 0 ;
margin: 22px 0 0 15px;
border-top: 2px solid #069;
border-bottom: 1px solid #069;
}
style the nav list
div#nav ul {margin-top: 0px; margin-bottom: .8em; }
div#nav li {margin-bottom: .5em; font-weight: bold; font-size: .76em; }
style the content
div#content {
margin: 20px 0 0 165px;
padding: 0 1em;
}
style the text in the content
div#content h1 { font-size: 1em; }
div#content p { font-size: .8em; }
div#content li { font-size: .76em; }
1remove red border after testing
This is our completed
EXAMPLE
Experiment with the Layout
This layout design has a vertical scroll bar when formatted, so you might want to experiment with fixed rather than absolute positioning for the links.