Fluid Three Column

By Arvind Satyanarayan on August 1, 2004 | Filed under Design & Templates | Comments (27)

Learning Movable Type has an article that guides you through the steps of creating a three blog layout. The only problem is that the #container width has ben set to 904 pixels. This means that on a 800x600 layout you're going to get the nasty horizontal scroll.

The best way around this is to create a fluid three column layout (what are fluid/fixed layouts ?).

1.Change the width of #container to 90%

2.Delete #center and corresponding div tags in all your templates

3.Duplicate your sidebar, find the following/similar code in your stylesheet


#right {
float: left;
width:200px;
overflow: hidden;
}

And replace it with the following:

#right {
    float: right;
    width: 20%;
    background-color: #FFFFFF;
    overflow: hidden;
    }

#left {
    float: left;
    width: 20%;
    background-color: #FFFFFF;
    overflow: hidden;
    }

4.Add the following code to your .content class:

margin-right:21%;
margin-left:21%;

5.Your sidebar code will now need to be the first thing in your template right after the banner. Instead of one sidebar however this time it will be two. So your template would look something similar to:

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>

<div id="right">
<div class="sidebar">
[...]
</div>
</div>

<div id="left">
<div class="sidebar">
[...]
</div>
</div>

There are two major caveats with this. The first is the fact that on screen resolutions 800x600 and lower, the calendar becomes partially hidden. You can fix this by making sidebars wider (something like 25% and hence changing the margins on .content to 26% )

The second is the accessibility of specifying your sidebars first. You may wish to read "Skipping over navigation links" on how to combat this !

Good Luck !

27 Comments

David H. Sundwall said:
on Aug 11, 2004 11:39 PM | Reply

Thanks for another great tip. I am new to CSS so I apologize if I am relying too much on you but is there a problem with this technique if the center content column is longer than the right and left link columns? If you look at my test page here (http://www.asoftanswer.com/Test/) it seems like the columns fall apart as soon as the content in one of the column ends. Is that just part of the fluid nature or a problem on my part?

Thanks for any help. And thanks for already.

Name

Email Address

URL

Comments (You may use HTML tags for style)

Remember personal info?

Movalog Blog

Making Movable Type Jump Through Hoops

Fluid Three Column

27 Comments

Leave a comment

Preview

Categories

Resources