You’ll notice, though, that this makes the sidebar sit on the far right edge of the page, while the main div stays on the far left of the page. We could float them both to the right and they would sit next to each other, but then they’d both be on the far right of the page. To center elements on the page, we can wrap everything in another div. We’ll call this div “container”:

To center the contents, we need to do two things to the container: give it a width and give it a left and right margin of “auto”:

#container{
width: 705px;
margin: 0 auto;
}

Exercise

Create a two-column layout that centers on the page using a container div.

Absolute vs. Relative Postioning

Absolute positioning takes an element out of the flow of the page, and causes it to fix in place without regard to the other elements around it, sometimes causing it to overlap them. In contrast, relatively positioned elements, which are the default (and what we’ve been using so far), flow in relation to other elements on the page, so that they don’t overlap. It’s a good idea to use relative positioning when possible, but sometimes absolute positioning is the only way to accomplish a certain layout.

#sidebar{
position: absolute;
left: 0px;
width: 190px;
}

Notice the “left” propery in the style of this element. Absolutely positioned elements can use the offset properties of left, right, bottom, and top. These properties will position the sides of the element in relation to its containing block

Exercise

Try positioning one of your divs using the position:absolute property and value.

Three-column Layout

What about three columns? In many ways, three-column layouts work the same way the two-column layouts do. For example, if you give each column div a width and float them all to the left, they will sit next to each other on the left side of the page, provided there’s enough space in the window for them to do so.

You may want to try having the left and right columns at a fixed size and letting the middle column adjust according to the size of the window. That’s where things start to get tricky. First, you have to arrange your HTML so that the left and right sidebars come first in the code, before the main div. Secondly, you need to use absolute positioning. You can see an example of this here: http://www.intensivstation.ch/files/en_templates/temp05.html

Displaying columns in any order

There will be times when you don’t have the flexibility to change the HTML to suit your needs. Instead, you’ll have to use CSS to change the position of divs on a page. For instance, your HTML may have the main content div first in the code, but you want the sidebar to come first from left to right. The way to acheive this layout is with negative margins. Let’s look at a 3-column example:

If we weren’t able to change the order in which the divs appear in the HTML, we’d have to do some CSS trickery. Here’s how negative margins work:

In this example, column 2 moves to the left -80% — the width of itself plus the width of the column it’s jumping over (column 1). Then column 1 takes a left margin of 20%, leaving room on its left for column 2 to fit. The CSS looks like this: