MoshuBlog.com

Thanks for visiting! If you're new here, you may want to subscribe to my RSS feed. My blog posts useful tips, ideas, tutorials and guides for WordPress bloggers - and articles about the life on the Canadian Prairies. If you are familiar with RSS readers, just add my feeds to your reader! You can also receive updates by email if you submit your email address in the box on the right.

Every now and then the issue of flexible layout comes up in the WP forum: either somebody looking for it or others trying to make it - and quite rare, someone offering such a theme.

What is a flexible layout?
I’d consider a theme — or any other website’s layout for that matter — as being flexible, if the site fills out the entire screen at any resolution and doesn’t cause horizontal scrollbars even at lower resolutions (like 800×600).

What is NOT a flexible layout?
While you could argue from a strictly technical stand point, I don’t consider a theme being flexible if:

• has a fixed 800px “box” in the middle of the screen
• with a header portion that goes across the screen

In this case, practically only the header portion of the site is flexible and changing its width, depending on screen resolution. The box in the center is always the same.

Surprisingly, too many people would think that the second case is a “fluid” or “flexible” layout.

Designing real flexible/fluid layout
Basically it’s not very difficult once you understand the underlying principles. You should always start with a “container” div that will hold together everything. And give its width in percentage, make the margins as auto.

The next step will depend on the number of columns. If it is a simple two column layout, just have one floated left, the other to the right; and define the width of the sidebar while leaving the content area flexible. You need the fixed width sidebar to be able to display your navigation properly and consistently. If you include a footer - clear the floating elements before it.

For a 3 column layout you can have several structures: think of it as different “layers” on top of each other. In the general/main container mentioned above put a second one: this will keep one sidebar and the content together in the same way (floated left and right) as in the case of 2 columns. Then define the width of this ‘inner container’ as let’s say 80% and fill the remaining 20% with the third column.

An example for this kind of 2 fixed width sidebar + a fluid center column for content is the Vesuvius theme which is downloadable from this site. Or, you can check it out by switching theme. (No, I did not design it, it was made as a template for WP 1.2 in the pre-themes era of WordPress by Root. His website as we knew it has disappeared from the net… I just ported it into a theme.)

Content first
Lately there is an increasing demand for 3 column layout but with a different coding. In the Vesuvius theme mentioned above if you look at the source code you’ll find the content of the webpage is presented in this order:

1. left sidebar
2. content
3. right sidebar

Admittedly, this is not ideal for search engines, for browsers that disregard the stylesheet (text only) and, obviously, drives nuts the geeks… Thus, the demand for a “content first” markup has been born. You can read more about it at PositionEverything.

The theme used presently on this site was made with this principle in mind and displays its content in this order without a stylesheet:

1. central content
2. left sidebar
3. right sidebar

As an experiment it has all the three columns fluid: they will change their width if you resize the browser window. I know it is not the best solution in case you have fixed width items in your sidebar - but as I said, being a development blog, it is the right place for experiments and play.

(If you are browsing with Firefox you can try to disable the stylesheet and check any website how they look like without the styling.)