Extending the Sidebar

By Arvind Satyanarayan on | Filed under Design & Templates | Comments (1)

Matthew writes

I am trying to make the side bar in Movable type to extend to the bottom of the page. I have gotten it to work in IE but not firefox. You can take a look at my site
sidebarproblem.png

Quite a few people ask me this question (you can see the problem in the screenshot -- click for larger view), and this problem was fixed in the default templates. It can be combatted in two ways.

CSS

Add the following to your stylesheet

#container:after, .content:after {
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
}

HTML

Alternatively, on every template that you have a sidebar, add the following code just before the end tag of the #container div

<div style="clear: both;"> </div>

1 Comments

Dasme said:
on Oct 12, 2004 6:31 PM | Reply

Another way to get teh side bar to extend is to create a small gif using the colour you want and set it as the background for the content container. This will cause the colour to extend to the bottom, regardless of which column is longer. I use a background image to get the columns on MovableStyle and it seems to work great.