Need Css Sidebar Height To Expand With Content

I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamicall

Solution 1:

This is a common problem when using DIVS for this type of layout.

If you google 'Faux column' you should get some answers.

eg. http://www.alistapart.com/articles/fauxcolumns/

Solution 2:

This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

Solution 3:

I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:

JavaScript based solution for this problem is not worse than any other solution. In fact if you are using JavaScript, you may save a few hours of frustration of trying to get things working. People will warn you against this by saying “What will happen if the user turned off JavaScript?“. Believe me, if the user has turned off JavaScript, most of the web is broken for him anyway. Your sidebar does not matter to him.

As cballou mentioned, the simplest way to do this thing is to use JQuery code:

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

Solution 4:

I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.

In my stylesheet,

.sidec
{
background-color:#123456;
}

In my HTML page,

<bodyclass="sidec">

content....

</body>

Solution 5:

I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.

Definitely worth checking out to see if it works for you.

Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/