FeedBurner
How to Break Your Blog - Tutorial
I’m often asked the question: “Why is my sidebar showing up all the way at the bottom of my blog?” Generally, there are two reasons for this to happen and I’ll try to explain it using a couple of images I created to help you visualize how your blog layout works.
In the first image below, you see a wireframe layout of a 2 column blog, the sidebar can be either on the left or the right, that doesn’t matter. There is always a number specified in the HTML code for the overall width of the layout and then there are widths specifying the dimensions of the main text area and the sidebar separately inside of the overall width. The green outline shows a photograph inside the main text area that fits properly within the column and also a link properly embedded in the post like this: Blog Flak as opposed to this: http://www.blogflak.com. Both links will take you to the exact same place but the second one cannot be word wrapped inside the post because it will break the link if there are any spaces in the line. Without word wrapping, it can force the main text area to become too wide for the space allowed, forcing the sidebar down.
In the image below, the layout is broken, with the sidebar forced all the way to the bottom of the blog, below the end of the main text area. As you can see in the wireframes either an image too wide or a link that is too long can cause this to happen because the main text area is forced to be wider than the amount of width allowed. Sometimes this won’t show up in some browsers, Firefox especially because the extra width will just overflow into the section next to it. The layout may not exactly be “broken” but it is still messed up.
This can also happen vice versa, if you put links or images in your sidebar that are too wide for the space allowed, that can also break your layout, forcing one of the columns to the bottom of the page. Generally most blog layouts allow items in the main column to be anywhere from 400 to 500 pixels wide and the sidebar is usually anywhere from about 160 to 220 pixels wide. These numbers can vary quite a bit from template to template even within the same blogging software. For example there are some templates on Blogger that will allow images up to 500 or 600 pixels wide but most are limited to about 400 pixels wide. Only by looking in the HTML source code of the template can you tell what the maximum allowed widths are.
You can resize images using HTML in the image source link itself by specifying the width and height of the image to be displayed but I don’t recommend it. That method artificially compresses the image size making it appear rough and grainy, but sometimes you have no choice. Here are the two attributes you use to do it: width=”#” height=”#”. The # symbol representing the actual number you want to use to resize it. The link will look something like this: <img src=”http://www.yourimage.image” width=”#” height=”#”>
To learn how to properly embed links in your posts please see my tutorial here…
Free editing software to resize your images, please check out my review here…
Technorati tags: tutorial, links, blogging, tech help, templates,
April 9th, 2006 at 5:45 pm
How appropriate that I’d done this to my blog just today! I knew why it was broken, but didn’t know the code to fix it.
I’m bookmarking this little gem of a site and will be back–probably the next time I mess up trying to put something up on my blog
April 10th, 2006 at 1:08 am
Gads. I tried to explain this to someone once and her answer was for everyone who read her blog to switch browsers, because in her browser it was fine. Um…OK, then.