Help! My Sidebar Disappeared

One of the most frequently posted design questions on blog forums and help sites has to do with the fact that the sidebar suddenly disappears after a user places something (usually an image) in their sidebar. There are a couple interrelated reasons for this.

Problem: Missing end tags.

No matter how perfect the code is in your template, one tag out of place can make the whole thing implode like a poorly baked soufflé.

Answer: Validate your code using the W3C code validator and fix any errors that come up.

Problem: The image is too big for the space provided.

For example your sidebar is set to a width of 200px. However, the image you have uploaded to your website is 220px wide. What happens is that while some browser such as Firefox will allow the image to run over the border, others will instead expand the sidebar to accommodate the image width

Answer: Either resize the image or resize the sidebar to accommodate the image. You must account for any padding or margin settings.

Preventative Maintenance

Another thing that you can do to prevent future issues with elements destroying all of your hard work is to set the overflow property to auto.

The CSS property overflow is designed to tell the browser what to do when an element flows outside of its container. There are four setting you can use.

Visible: This is the default setting. This allows the element to go wherever it wants, possibly wrecking your template in the process.

Hidden: This setting clips the content at the point in which it expands beyond its container. However this is undesirable because the browser will not display any options, such as a scroll bar, to see the rest of the content.

Scroll: Like the Hidden option, the content will be clipped off where it overflows outside its container, however this option will display scrollbars so that your visitors can view the content. I do not like this option because the scroll bars will be displayed whether or not the content flows outside its container. It just makes the site look messy.

Auto: Auto works exactly like the Scroll option. However the scroll bars are hidden and are only displayed when content actually hits the overflow point.