Learning Movable Type: Converting from Fixed to Fluid Style


This tutorial is out of date. ~Elise March 5, 2007

This tutorial is written by LMT contributor Arvind Satyanarayan of Movalog.

Updated Nov 16, 2004

The default styles that come with MT are known as 'fixed' styles. This means that size and position of layout elements, such as columns, are fixed and are defined in pixels (px). This also means that no matter what a person's screen resolution, everything will be the same width and in approximately the same position. The alternative to a fixed design is a fluid design. A fluid design uses percentages when defining size and positions, so the sizes of elements on the page are relative to the user's screen resolution. A fluid design also removes the horizontal scroll bar. With a fluid design, if the user widens the browser window, the columns that hold the text widen as well.

This tutorial will guide you through converting your MT default 2 column fixed styles into 2 column fluid styles. It will also guide you through converting your 3 column fixed into fluid thereby removing horizontal scroll on some screen resolutions.

Two Column Fluid

The default MT stylesheet contains container, center, and right ID elements that look something like this:

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;
background-color: #FFFFFF;
border: double 1px #FFFFFF;
}

#center {
float: left;
width: 500px;
overflow: hidden;
}

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


Change those elements in your stylesheet to the following:

#container {
line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 90%;
background-color: #FFFFFF;
border: double 1px #FFFFFF;
}

#center {
float: left;
width: 74%;
overflow: hidden;
}

#right {
float: left;
width:25%;
overflow: hidden;
}



You will also need to add the following code to your stylesheet to combat a problem faced with Gecko browsers not correctly rendering the fluid #container:

#container:after {
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
}


Save and rebuild your stylesheet.

Now your stylesheet is fluid. Depending on the reader's screen resolution, each element takes up a proportionate amount of space.

Three Column Fluid

Learning Movable Type has a tutorial that guides you through the steps of creating a 3 column layout. The #container width in this tutorial is set to 904 pixels. This means that on a screen with 800x600 resolution you'll have to use the horizontal scroll to see the whole page.

The best way around this is to create a fluid three column layout.

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">
Your right sidebar content
</div>
</div>

<div id="left">
<div class="sidebar">
Your left sidebar content
</div>
</div>


Updated Nov 16

There are few 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%). Also on screen resolutions lower than 1024x768 the forms on the sidebar (eg search/subscriptions etc.) look like they're falling off the screen. The way to fix this:

1. Give your form input an id, for example <input type="text" name="search" size="20" alt="Search Term" *id="search"* />
2. Add form #search {width:80%;} to the stylesheet.
3. Replicate this for all form inputs on the sidebar.

You may wish to read "Skipping over navigation links" to make the three column fluid design accessible.


Links:

Fixed vs Fluid - Movalog tutorial on fixed versus fluid designs.
Fluid Three Column - Movalog tutorial on fluid three column designs.


Posted by Arvind Satyanarayan on November 16, 2004 8:49 PM to Learning Movable Type http://www.learningmovabletype.com/