Need CSS sidebar height to expand with content

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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/

OTHER TIPS

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()));

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()));

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>

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/

I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =) Happy Holidays Everyone! hugs, tara

I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.

As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.

The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.

Regards, Jonah

With the poor attitude towards new members on here I expect to be barracked for this answer, here goes. I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

I am sure that this method has its limitations but it works perfectly on all my pages.

It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top