CSS Layout

Two-column Layout

Layouts with CSS can get tricky. So far, this web we’ve worked with two-column layouts where the sidebar floats to the left.

#sidebar{
width:200px;
float:left;
}
#main{
float:left;
width: 600px;
}

To float the sidebar to the right, we can first change the float property on the sidebar to “right”.

#sidebar{
width:200px;
float:right;
}
#main{
float:left;
width: 600px;
}

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”:

<div id="container">
<div id="header">
<h1>The Site.</h1>
</div><!--end header -->
<div id="sidebar">
<h3>Sites I like</h3>
<ul>
<li>alistapart.com</li>
<li>apartmenttherapy.com</li>
<li>lifehacker.com</li>
</ul>
</div><!--end sidebar -->

<div id="main">
<h2>Welcome to my site</h2>
<p>But, soft! What light through yonder window breaks?
It is the east, and Juliet is the sun!</p>
</div> <!--end main -->
</div><!-- end 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:

<div id="main">
<h2>Welcome to my site</h2>
<p>But, soft! What light through yonder window breaks?</p>
</div><!--end main-->

<div id="sidebar1">
<h3>Sites I like</h3>
<ul>
<li>alistapart.com</li>
<li>apartmenttherapy.com</li>
<li>lifehacker.com</li>
</ul>
</div><!--end sidebar1 -->
<div id="sidebar2">
<p>All about me</p>
</div><!--end sidebar2 -->

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:

negativeMargins

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:

#column1{
float:left;
margin-left:20%;
width:60%;
}

#column2{
float:left;
width:20%;
margin-left:-80%;
}

#column3 {
float:left;
width:20%;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>