How to prevent images from overflowing into your sidebar in Blogger

Blogger has a nice post editor that keeps most of the "programming" stuff hidden.  The graphical "what you see is what you get" (WYSIWYG) editor makes it easy to create an attractive blog without requiring web developer skills or user experience expertise.

However, there are times when a little bit of HTML or CSS knowledge can help you improve the look and feel of your blog.  If you use any large images in your blog, this post is for you.

When you add an image to your blog post, Blogger allows you to set the size of the image, giving you control over how your post will look.  But for large images, Blogger won't by default prevent the images from overflowing out of the blog post "container" if you set an image to be larger than the post itself.  With a large image, you may find that it covers some of the text in your sidebar if you make the image too big.

Fortunately, there's an easy way to prevent that from happening.  All you have to do is add one rule to Blogger's internal stylesheet.

• From the main Blogger dashboard page, select Theme on the left sidebar.
• Click on the orange Customize button under the snapshot of your blog.
• On the left side of the page, select Advanced.
• A list of options will appear, beginning with "Page Text." Scroll down to the bottom and select Add CSS.
• If you've never used this feature before, the editor window will probably be empty.  Type or copy the following text into the editor:

img {
    max-width: 100%;
  }

• Click on the Apply to Blog button in the upper right corner.
• To the left of that button, click on the Back to Blogger link.

Once you've added this simple CSS rule, Blogger will make sure none of your blog's images -- even for posts you've already published -- exceed the width of the post.