dummied

Making Movable Type fluid

At a glance

This entry was written on November 22, 2005.

The entry prior to this is entitled What I'm talking about.

The entry following this is entitled Sticking my neck out.

There are 0 comments on this post.

This entry has been tagged as CSS, MovableType, Recommended, Thissite.

Archives are also available.

Movable Type, the publishing engine that (used to run) this site, comes complete with a fixed-width layout (much like the one you're viewing). I like fixed-width, generally speaking, because it's somewhat close to the newspaper pages I design for rent money.

I know the page is going to be so wide, and I've got that much room to fill.

Some people, though, and some applications (a few of which are on my plate as upcoming projects), scream for a liquid layout.

And getting it in MT is much easier than expected, even with Stylecatcher styles (I think. I've only tested this with one of them so far).

Essentially, we just need to adjust the widths of four content blocks: #container, #banner, #alpha and #beta. And thank's to the way CSS works, the easiest way to do this is not to root around through the copious amounts of code that come with a default MT stylesheet, but rather to skip straight to the end and do it there.

In my case, I went to the end of my stylesheet and pasted in the following:

#container {width: 95%;}
#banner {width: 100%;}
#alpha {width: 66%;}
#beta {width: 25%; float: right; }

You can see the result of this fiddling with the Vicksburg Red Stylecatcher style here. If anybody else wants to take this hacked-together solution for a ride around the block on any other default or Stylecatcher styles and runs into a problem, feel free to let me know.

"But your percents don't add up," I can hear you muttering under your breath.

Yeah. They don't. The default MT stylesheets include margins and padding around several of the boxes. Evening out all the percentages just makes the float break. Besides, the idea here is to provide a quick, easy and fairly easy to understand (translation: easily cut-and-paste-able) solution to a somewhat common MT problem.

A few caveats to this quick hack:

Internet Explorer doesn't recognize min-width, so the layout will keep collapsing until it can't collapse anymore (on nearly everything else, MT's min-width declaration in its default stylesheets catches everything before the floats start to fail). You could do some fancy javascript tricks to make IE cooperate, but it should work fine in anything above 800X600 and we're going for a simple fix here.

Each time you switch a stylesheet with Stylecatcher, you're going to have to go into your stylesheet template (you don't actually have to mess with the Stylecatcher stylesheet files themselves, just the MT index template will do the trick) and copy this code back onto the end of it.

This works with the default out-of-the-box templates for Movable Type. If you've gone ahead and added a third column or otherwise futzed with the MT template innards, this probably won't be working for you. If I have time, which is highly unlikely unless there's a swelling of demand for this sort of thing, I could go through and make a more robust solution at some point, but for now, it's a simple, quick and dirty solution.

That should be it. If anyone runs into any issues (which is entirely possible since this was pretty quickly hacked together at the request of a reader), or this completely breaks in some unforeseen way, feel free to let me know and I'll update this page accordingly.

But what about the inside pages?

In my haste to get this out there, I forgot to consider the fate of the one-column inside pages of a default Movable Type install. The quick and dirty fix for making those fluid would be:

.layout-one-column #container { width: 90%; }
.layout-one-column #banner { width: 100%; }
.layout-one-column #alpha { width: 95%; }


Just copy and paste, also on the end of your stylesheet template file.

It's not 100-percent perfect (the gaps at the right edge and the left edge won't exactly match up as the page width gets wider). Also, being at work, I haven't had a chance to test drive this quick solution on any Windows browsers.