November 16, 2004

Converting from Fixed to Fluid Style

This tutorial is written by LMT guest author Arvind Satyanarayan of Movalog.

Updated Nov 16

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.


Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!

Posted by Arvind Satyanarayan on November 16, 2004 to Tutorials for Old Versions of MT
Comments(3) | Email to a friend | Printer-friendly version


Trackback

If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/384

» The Resolution Solution from This is going to be BIG.
At work, I use a fancy tablet with all the bells and whistles....[read more]

Tracked: April 14, 2005 05:45 AM

Comments

Such a young kid so much talent!
Thank you....a very useful thing to know..

Thank you Arvind..

Regards,

Bill Ainashe
www.ainashe.org

Fluid Change breaks in osX IE

Hi Arvind and Elise,
You two are the biggest MT help!

Your fluid template works great except in Explorer for osX when the browser window is re-sized below 800 pixels. (using IE5.2 on osX 10.3.8)

Here is a basic instal of MT 3.15 to demonstrate:
http://re-sist.net/testblog2/
The only changes to the basic installation are
enabled Dynamic Publishing, Page-level Caching, and conditional requests.

I hope you can help. Thanks. -fun

How can we change the new MT3.2 to a fluid style also?


Post a comment

(Before posting a comment please see the Comments and Trackbacks Policy. Do you need help troubleshooting your weblog? Please post questions and requests for support at the MT Support Forums. Thanks!)




Remember Me?

(you may use HTML tags for style)

Email to a friend

Email this article to:


Your email address:


Message (optional):