Long Words and Urls Can Break Your Blog Template

When your right blog sidebar slips below the main content, what is the first thing you should think about? Assuming you have a 2 column (main + sidebar) 750px wide blog, it basically means that the main content width and sidebar width are not fitting into the blog main container you have defined and so the sidebar slides below the main content.

I am sure this has happened to you before. The fix is simple. Just reduce the sidebar or main content width, or increase the total blog width and they come back together. I have observed that Firefox efficiently masks this error, but Internet Explorer is less forgiving and will surely break your template. This is in fact one of the reasons I always test my blog on IE when I tweak the blog layout.

Broken template with no layout changes!

This was a case when the blog layout was not modified by me for over a week, and though I usually use firefox where it looked ok, I happened to see my broken template in IE by chance. Since no CSS or width parameters were altered, I could see no reason why the sidebar was down. I tried to reduce the sidebar width, but the problem persisted.

After many CSS tweaks I found the cause. I had a post on the 666 factor on 6/6/06 called Hexakosioihexekontahexaphobia. My sidebar lists the most recent posts, so when this long term tried to fit in the sidebar, it exceeded the width of the sidebar and broke the template. Once I had recognized the cause, I had to simply change the time stamp and get it out of the newest post list and restore my template. So the lesson is do not used long words, and break them with a hyphen if you have to use them.

Similar errors can happen if you add slash without spaces in the post title. In the sidebar, these word1/word2/word3/word4 will again act similar to a very long word.

This error may be duplicated not only in recent posts only, but also in recent comments (when some commentor has posted a long word), or feeds converted to html from other blogs (which might have posted a long word), or a long link from a del.icio.us linkroll.

A similar situation arises when you approve a long link in a comment which goes beyound the width of your blog and might break your template. Depending on your layout, either the rest of the url hides behind the sidebar, extends through the entire blog width into the empty background space or simpy displaces the template.

So your template might break not only when you change it without proper testing, but also by long urls, long words and connected short words in the recent posts, comments, linkrolls in the sidebar and comments… Always check you blog in multiple browsers.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.