Fixed vs. Fluid
The default styles that come with MT are what is known as 'fixed' styles. This means that size of objects and their positions are fixed and are defined in pixels (px) This also means, no matter what a person's screen resolution, everything will be the same width and in approximately the same position. Now this may seem good but - especially with MT's default styles - looks bad depending on the screen resolution. Taking for example MT 3's default styles, on a 1280x1024 screen resolution, the weblog appears as quite a narrow bar that is centered on the screen - not very appealing at all.
The other option to 'fixed' designs is 'fluid' designs. A fluid design uses percentages when defining size and positions. ie depending on the users screen reolution, the stylesheet renders the page ! Personally, I much prefer fixed designs though it is claimed they are not as accesible as fixed designs.
To turn your fixed MT style into a fluid style do the following:
You originally stylesheet would 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 it to:
#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;
}Now you have a completely fluid design, no matter the size of the browser window or the screen resolution of the user, each section of your stylesheet will proportionately take up the same amount of space !
Coming soon, three column fluid designs !
9 Comments
Subscribe to Movalog's Feed
mythusmage said:
on Mar 26, 2005 4:32 AM | Reply
I tried switching from fixed to fluid, now my layout is screwed up. What gives.
mythusmage@mythusmage.com
mythusmage said:
on Mar 26, 2005 4:36 AM | Reply
About this:
Where does it go?
Do not assume people know what you know, include full instructions.
Arvind Satyanarayan said:
on Mar 26, 2005 6:44 AM | Reply
I do not appreciate your tone. As the instructions clearly say
fun said:
on May 22, 2005 10:09 PM | Reply
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
The Cerebrate said:
on Nov 15, 2005 2:16 PM | Reply
Hi.
How similar is the procedure to do this with the new MT 3.2 stylesheets?
I've just migrated - well, am in the process of migrating - my weblog over to MT, and I'd like to fluidify the minimalist theme, if I can figure out where I need to make the matching changes...
Retailer said:
on May 8, 2006 3:44 AM | Reply
Some success. My three column layout works fine in IE, but not in Firefox. The center column is pushed to the bottom, after the left and right columns. I've tried adding the #container:after code with no luck. The design started as the basic MT 3.2 design which I modified to get to the three columns. Thanks.
Michele said:
on Jun 17, 2006 2:37 AM | Reply
I'm having an issue. I'm now fluid 3 columns. I love it. One problem. I cannot get the right and bottom borders to show on alpha and gamma. The left (on both) IS showing. It's driving me absolutely insane. MT won't support template style issues, and the MT forums - no one has answered my posts. Any ideas on how to help me get these things to show? Please?
Daniel said:
on Jul 7, 2006 1:35 PM | Reply
On viewing this page 1/2 of the viewing area is just BLANK!!!
When you include the website header and the menu bar on the left... well there isn't much space left for any content at all forcing people to continually scroll every page they goto.
Thats just bad design pure and simple.
"fixed width" designs should only be used by people who have no idea what they are doing as the layout of objects will never change from page to page.
Don't design your website assuming people are useing 800x600... simple fact is a lot of people these days have atleast 1024x768 and resoltions right past 1280x1024
Cindy said:
on Dec 6, 2007 5:09 PM | Reply
I've got the 3-column working well in MT 3.15 - as long as I view it in Firefox. I can't seem to get the main content area to display in Internet Explorer. Any advice you can give will be most welcome.