Making The Left Column

Putting two columns at the left and right of a page is pretty simple once you learn the differences between using absolute positioning to place the left column as opposed to the relative positioning used to float the right one. Here's an example.

Start making a two-column page by placing the left column. That would be a page like you made in Lesson 09. It looks like this.

Make any margin between the content and the box you'd like for now. We'll tweak the content margins last.

Floating The Right Column

Adding the right column is merely a matter of adding a second <div> box, styling, and floating it to the right. Here's the box I made for the example.

<div id="box2">

<a href="#">Link #1><br><br>
<a href="#">Link #2><br><br>
<a href="#">Link #3><br><br>
<a href="#">Link #4><br><br>

</div>

The only thing to note here is that I've given this second <div> a unique ID -- "box2" -- to differentiate if from "box1" in the CSS styling and positioning. Below is the CSS I used to style and position the "box2".

#box2 {
position: relative;
float: right;
width: 100px;
border: solid 3px #ff0000;
background-color: #00ff00;
}

The important positioning elements in the above styling are "position: relative;" and "float: right;". That's really all you need to position the <div>.

Another important issue is where the box is placed in the code. This is because the right box is positioned relatively. It will be rendered according to its position in the flow of the code like any other block element. It must be coded before the content it is to float around. If it were coded after the content, it would appear below the paragraph and to the right. Give this a try and see for yourself.

Remember that floating works a lot like positioning <img>s. You need to code the <div>s first and the content afterwards when using relative positioning and floating.

Tweaking The Margins

To wrap up our simple two-column example, we need to style the content's margins to provide an equal amount of space between the left and right boxes. To keep this space proportional at all screen resolutions, I'll be using percentages to set both margins for the paragraph.

Begin by finding a percentage that provides the desired margin for the right box. I use trial and error. I eyeballed the page and began with a 10% margin. That wasn't enough, so I went with 20%. That worked better so I stuck with it.

I then used the 20% value to set the left margin. I did this because the boxes were of the same width and I wanted the same amount of space. It worked great, so the final margins for the paragraph ended up being:

p {
font-family: Times New Roman, serif;
font-size: 12pt;
font-weight: 600;
color: #000000;
margin-left: 20%;
margin-right: 20%;
}

In many cases, for various reasons, the margins will often have different percentage values. Just make sure they look balanced when rendered.

You can set absolute margins, but this often causes too much right margin at high resolutions and too little right margin at low resolutions. You can also set an absolute pixel margin for the left margin and a percentage value for the right. In this case, the right margin will rarely be the same width as the left one and the content will have an unbalanced, or uneven, look. Generally a balanced appearance is the goal, percentage values are the best way to achieve this.

Putting The Content In A <div>

If you view the example in Netscape, you'll notice that there's a lot of whitespace above the content's text. To get around this we can put our content in its own <div> box and position it. We'll be covering this in the next lesson. In practice, most CSS-P page place everything in a <div> box if there is more than one simple column.

Summary & Exercises

Begin making a two-column page with CSS-P by making and placing the left column with absolute positioning. Next make the right column with relative positioning and "float: right;". Finally, tweak the margins.

When making your margins, go for an even amount of white space on both sides of your content. To maintain these proportions throughout a range of screen resolutions, use percentage values for both left and right content margins.

Try adding even more columns. Do this by coding the <div>s before the content. Use absolute positioning to place columns to the left of the content. Use "float: right;" for the right columns. Notice the order that the right columns float themselves. Change their position by changing the order in which they were coded.

To Next Advanced CSS Lesson

Back To Advanced CSS Index