Protect floated columns from falling apart

This is a presentation of a small trick that might become a life saver for your future projects in case you create cms templates and you have no control of what users might upload in your fixed width container.

Let's say that you created a wordpress theme with 540px wide content area, but user decide to upload a 600px wide image. Some browsers will handle it but some won't. I guess you know which ones I am referring too.
Anyway, try to look at this example in IE6.

Example 1

What can we do about it? Most effective thing is to advise your users not to upload any kind of content wider than your container. Other thing is to add this nice little line of code to the definition of your container and solve the issue.


Take a look at it now.

Example 2

This will prevent your container from expanding and hide the content wider than container's width. Visually, it will result like the right part of the image has been cut off. But, you'll agree it's a much better solution than having your side column pushed to the bottom.