The New Designer Templates Lack Text Overflow Protection

If your blog is similar to mine, you may, on occasion, include content that doesn't fit, horizontally, in a post. A long time ago, that would make the blog, when viewed in Internet Explorer, show either the post or sidebar at the bottom of the page. Blogger added a bit of code to the templates, to prevent this from being a problem.

A bit of extra code takes care of this problem.

#main-wrapper {
...

float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

The "overflow: hidden" rule had a second benefit. It also stopped long lines of text, when encased in "<pre> ... </pre>" blocks, from overflowing into the sidebar or margins of the blog display.

It appears that the new designer templates, written for newer versions of Internet Explorer, which automatically provide overflow protection, do not provide that feature. If your blog has posts which contain long, unbroken lines of text inside "<pre> ... </pre>" blocks, and you just migrated the blog to a designer template, you may have noted this change.


This is what I saw earlier, yesterday.



If you lament this change, fortunately, there is an easy fix, using the "Add CSS" window in the Template Designer.

#main {
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

I added that code, yesterday, and now you can see how my blog displays long lines of unbroken text. Or, you can look immediately above.


This is what I have, now.



It's an easy fix, when you know how to make it.