Clever Geek Handbook

Requires CSS sidebar height to expand content

I have a two column layout, with a gray sidebar on the right. I need the sidebar height to expand as the left column height increases (due to dynamic content expansion). I can make the sidebar a suitable static page, but I cannot resize it to fit the rest of the page. Been some google but couldn't find a job that worked for me.

Does anyone know how to do this?

+2


source to share


8 answers


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

If you google "column faux" you should get the answers.



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

+10


source


This can be turned off slightly, but if you are using jQuery on your site, you can do a quick calculation and resize all DIVs sharing a similar class with a maximum height:



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


source


I was haunted by this problem for a while and I wrote an article about this issue: Finish with fake columns . Here's what I claimed:

A JavaScript-based solution to this problem is no worse than any other solution. In fact, if you're using JavaScript, you can save yourself a few hours of frustration trying to get things to work. People will warn you against this by saying, "What happens if the user has disabled JavaScript?" Trust me, if a user has JavaScript turned off, most of the web is broken for him anyway. Your sidebar isn't important to him.

As cballou mentioned, the easiest way to do this is using JQuery code:

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


source


I changed background-color

to the same color as the sidebar on this particular page, although I have backgrounds for all of my sections and not one general background. But it may not work for everyone.

In my stylesheet

.sidec
{
background-color:#123456;
}

In my HTML page

<body class="sidec">

content....

</body>
+2


source


I recently saw a rather creative solution to this problem using CSS position:absolute

and border

.

It is definitely worth checking if it works for you.

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

+1


source


I'm not sure if this will help as I am a beginner. However, when I am struggling with getting the sidebar to show all the content, when I doubled its size, I did the following. I changed my height and width with no response until I changed the class. My class was listed SB SB SB. So when I changed my class to read the width of the SB SB SB it fits my content instead of the original frame size. I also tried SB max sb width and it worked too, but it took out the footer bar (it doesn't display anymore). I went back to SB SB width SB and all is well. This is a super duper rudimentary for all of you I'm sure, but just in case there is another newbie reading this that knows little about html code like me ... Hope this helps =) Happy Holidays! hugs, container

+1


source


I am assuming that you want to apply a specific effect to your layout so that both columns need to be resized. If you want to dynamically change the column height values, I doubt it will just work with css unless you implement some javascript to control the styling.

As Dahl suggested, have a look at the link for faux columns. As the name suggests, the decision does not have a big impact on changing the height of the columns. Instead, it gives the "illusion" that both columns are the same height when in reality they are not - and is used using background image tiles.

The idea is that there is no need to complicate the markup. A simple structure with a touch of "illusion" with images is a common practice in web design.

Regards, Jonah

0


source


With a bad attitude towards new members here, I expect to barack for this answer, here. I ran into this problem by creating a 960px wide 1px wide background image with the two colors I need for the columns at their respective widths (780px and 180px). I then used that as the background image for my container, iterated over the y axis, and made the content and 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'm sure this method has its limitations, but it works great on all my pages.

I may not have explained it very well, if yes, please be kind to that. I'll try to extend my method (which is probably already known).

0


source






More articles:


All Articles