Fluid Column Design

The gargoyles layout has a unique characteristic in that the middle and right columns have a fluid width that is based on the width of the window. This is not a new concept, but in a source-ordered 3-column layout, it’s not an entirely easy thing to do.

I was recently asked about creating a layout that had all three columns fluid. I’ve started looking into this, unfortunately it appears this will not be easy to do.

My original goal for the skidoo layouts was to create a multi-columned layout with columns whose background color ran the full height of the document and without using any images (such as faux column borders via a background image that is repeated vertically). The trick with skidoo is to create a container for all three columns that has borders on the left and right side. Then, through the use of negative margins, push the side columns to fit over those side borders of the parent column. Those side borders become the background colors for each column.

Works pretty well.

Unfortunately you cannot specify border width in percentage values, only in pixels, ems, and so on.

So now what? Percentage values is how you get fluid columns. Javascript is certainly an option. I’ve been veering back into using Javascript for some purposes, but I’d like to use it as sparingly as possible.

I could use images, but….

Maybe it’s time to create a new breed of layout where I’m not after an image-less layout.

Any thoughts?


0 thoughts on “Fluid Column Design

  1. I have no idea on how to use your CSS.. they’re very good… but as a dummy in these things, I dun seem to comprehend.
    Mind to help me (and the thousands of others who want to use Gargoyles) by writing a tutorial for WordPress?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s