Blogger Templates

Sidebar sliding to the bottom of the page is probably the biggest problem bloggers have with layout coding. This problem usually occur when an image or link is taking up more room than its suppose to; without enough space, the sidebar slide down the page. So, to solve this problem, usually people would recommend finding out which image or link is causing the problem and
remove it. However, there are two CSS methods that could solve this problem and they may be easier than going through a huge amount of content to find an image or a link.


Method One: Word Break

word-wrap: break-word;

add the above to the container, usually main content and sidebar column

This method is used in all blogger beta templates, as it suggests and as commented in the templates it "fix for long text breaking sidebar float in IE". It will break long text and links, but it won't work on images.


Method Two: Overflow

overflow:auto;

or

overflow:hidden;

add the above using either option auto or hidden to the container, usually main content and sidebar column

This property controls how overflows are rendered in a web browser for all overflowing content, link, images, and anything else. With first option auto, if anything is larger than its container, the container itself won't expand, however a scroll will appear in the container so if want to see the
entire image or link, you can scroll across as you can see in the second post at Blogcrowds Forum. The second option hidden, will tell the browser not render anything overflowing its container so part of the image or link will be cut off.