Thursday, October 12, 2006

How to put a wide image in the blog without causing the sidebar to slide to the bottom of the page

I am going to test to see if putting an image wider than the main column into a post will cause the sidebar to slide down to the bottom of the page by putting it into a scroll box. The photo I am going to put in the scrollbox below is 800x600 pixels whereas the main column width is only 410 pixels. Here goes:

800x600 photo

Well, I published it, and checked in Internet Explorer, FireFox and Opera, and in all 3 cases, the sidebar stayed where it is supposed to be - at the top of the page. So, if you ever want to put a large image in your blog without the problem of sidebar sliding to the bottom of the page, put it in a scroll box. To get HTML for the scroll box, go to How to make a scrollable box.

If you don't like this because your visitors have to scroll to see the rest of the photo, another way is to choose a template with the sidebar on the left and the main column at the right like Sand Dollar. Look at these 2 blogs which uses the Sand Dollar template. Notice how large the photos are, and they don't cause any problem with the sidebar:
Plus Toll Plaza (close the window to get back to this page)
After 1994 (close the new window to get back to this page)

Update: Rose commented that a better idea is to post a thumbnail so that visitors can click on the thumnail and go to another page to view the photo (see comments section). There are normally more than one way to solve a problem, and mine is one and Rose is another. But I think a better idea than posting a thumbnail is uploading the large photo via the normal Blogger way which will place something bigger than a thumbnail but which will be reduced in size by Blogger to fit the column, and visitors still have the option to click on the image to view the larger image. I normally include a message to click on screenshot (most images I post are screenshots) to enlarge.



  1. You are then dealing with an annoying scroll box where you need to scroll just to see the image. An easier solution would to make the image a thumbnail and click for a large view and have the image pop up in a new window.


    Ps: Feel free to use that tip. You normally do!

  2. This comment has been removed by a blog administrator.


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics