Need CSS sidebar height to expand with content

html css css-float expand

19,695

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,

<body class="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/

View more solutions

19,695

Author by

Admin

Updated on June 04, 2022

Comments

Admin almost 2 years

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 dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.

Does anyone know how to do this?
Darren Oster over 11 years

jQuery IS real JavaScript, John. Your comment implies we should be standing on the shoulders of midgets, not giants.
arlomedia about 11 years

That's the first hug I've received on StackOverflow!