Float-based Layouts

TRODIM is a coordinate project funded by the Spanish Ministry of Education and Science for the period 2008-2010 and with the participation of:

Controlling Column Widths

Now there are some ways to handle this. The first would be to set a specific width to the side columns so you understand your limits on content dimenions. By default this layout specifies side-column width in EMs. This means they shrink and grow depending on the size of the font used within the page. This can be a good thing and a bad thing. If you leave your content to just text, it's great because the columns will shrink and grow depending on the user's default font size. Users with eyesight problems will have wider columns to keep the content's relational space equal to those with smaller font sizes. However too big a font will squish the middle column out completely.

So what if you want to change the size of the side columns. The edits to the stylesheet are minimal and could also be placed in a secondary stylesheet (or theme if you'd like) to override the default values. The CSS would look something like this:

#outer-column-container {
    border-width: 0 [right column width] 0 [left column width];
#left-column {
    width: [left column width];
    margin-left: [negative of left column width];
#rightColumn {
    width: [right column width];
    margin-right: [negative of right column width];

So if I wanted the left column at 200 pixels and the right at 300 pixels the CSS would look something like this:

#outer-column-container {
    border-width: 0 300px 0 200px;
#left-column {
    width: 200px;
    margin-left: -200px;
#right-column {
    width: 300px;
    margin-right: -300px;

Aware Of Space Limitations

If we take the above dimensions into consideration we know the left column can't have any object wider than 200 pixels. Not so! We also must take padding into account, 10 pixels on each side (by default). This means we can't have anything over 180 pixels in the left column. For the right column the upper width limit is 280 pixels.

Now, by default, the page has a minimum width of 600 pixels. Take away the 500 already in use by the side columns leaves us with 100 pixels for the middle column, minus padding gives us 80 pixels. Ah, not so fast! We also have the margins on #page-container that separate the edge of the layout with the edge of the viewport. That's 14 pixels on either side, giving us an upper limit of only 52 pixels for anything in the middle column.

"FIFTY-TWO?!". Yep. Anything wider and the page would break at it's minimum width. You could shrink the right column to 200 pixels, giving you another 100 for a total of 152 pixels maximum width for any single object in the middle column. You could increase your minimum width from 600 to 800 and make it 352 pixels. You could drop the right column alltogether and give yourself 552 pixels of width to play with. Great! Except that's still a bit small, especially if you're showing large photos on your website.

A Cheap Fix

The space problems brought about by this style of layout will frustrate many and others will simply throw this style of site out as an option for their development. So we need a legitimate way around these spacial issues. Well, here's the cheap fix:

<img src="logo.jpg" style="margin-right:-100%;">

A negative margin on any element will make the browser treat it less wide than it actually is. In this case, a -100% margin, the browser will treat it as if it had no width. If the viewport starts to shrink below the space needed to display the e image within the column, the image will overflow, but won't break the layout.

Let's be clear about this: the image will overflow. This means the layout will remain the same and the image will overlap whatever exists in the area to its right. If you've got content in the right column, and your image is in the middle column, your right column's content will be hidden beneath the image. Neither the middle column, nor the layout, will expand to contain the entire image. It's a cheap fix. It'll keep your layout from breaking, but could cause other problems.

You may also find text that would normally wrap around the image to be hidden underneath the image as the text is laid out with respect to an object with 0 width. A line break or use of a DIV could resolve such issues, but then you lose out on the ability to text-wrap the image. This is far from a perfect solution.

Another Cheap Fix

In fact I've yet to find a solid fix for this issue. But there is another option, specific to images, that I've had success with. What you can do is create a DIV element and set the image as the background of the DIV. Give the DIV a 100% width and it will shrink and grow based on the available space. As the column narrows, so will the DIV. At a certain point, the image will start to be cropped. This allows you to put images into the content without the problem of overlapping seen in the previous method.

One More Fix

Set the max-width property for the img element to 96% and the height property to auto. This will make images shrink as needed. For IE 6 and earlier (which do not understand max-width) you could set the overflow-x property to hidden on the immediate parent element that contains the image or other such content.


  • Source Ordered
  • No Tables
  • Very Compatible


Disney produced a television show in the mid 1990s called Gargoyles. It's a great show and I'm a big fan. A few years ago Disney started to release the show on DVD. The last release was of season 2, volume 1. That was two years ago. Volume 2 has not been released. Why? Poor sales. So if you should find yourself wanting to support my work, instead I ask you pick up a copy of season 2, volume 1. It's a great show and you might find yourself enjoying it.