0

My website uses 2 columns, but the only way I've been able to get the columns height to match is to use a fixed height, but this presents a "scrollbar in a scrollbar" issue where the content column has to have overflow: auto; for all the content to be seen, but if the user's browser doesn't make the entire page visible at once, both the page and the content column have scrollbars.

What I would like to do is match the sidebar columns height to that of the content column. I was thinking of setting some javascript on page load to do it, but I can't help thinking theres a better way.

The site in question is http://www.pcbuddies.co.za (for reference).

Any suggestions would be greatly appreciated. Thanks in advance!

EDIT 1
After applying the JQuery solution below, I'm happy with the result (mostly). Where I do have a problem is when the first section (sidebar) of every page (navbar) is smaller than another section see http://www.pcbuddies.co.za/Services/Default.aspx.

In this situation, the content is overflowing past the site's footer.

Logan Young
  • 431
  • 1
  • 6
  • 22

3 Answers3

1

I wrote out a solution but I was paraphrasing a better example at this site here, which I find works very well. It uses a trick to create the equal height columns but works very well - without any javascript.

Here's an example of it in action: example

biscuitstack
  • 11,591
  • 1
  • 26
  • 41
  • I've seen this... I must be doing something wrong whenever I try to apply it because it never seems to work – Logan Young Feb 22 '11 at 21:27
  • I've added an example that should make sense. – biscuitstack Feb 22 '11 at 21:28
  • Like most people, I'd recommend avoiding javascript when you don't have to use it, so I suggest trying this method and - if it doesn't work - show me the code and I can see where you're going wrong. I've used this solution myself in sites. – biscuitstack Feb 22 '11 at 21:32
  • I'll write up a dummy site within the next 24 hours and then open a question for it. I'll add the link to that question in a comment here. – Logan Young Feb 22 '11 at 22:11
0

I always catch grief for suggesting this, but I've found the best, most dependable way of doing this is to utilize Javascript (in this case, jQuery) to make all of the columns the same height as the tallest column. See my live example.

Live Demo http://jsfiddle.net/T9VUc/1/

If you want to do this on the page load, try this. Keep in mind, this procedure uses jQuery, so you will need to include that in your page

var tallest=0;

$(document).ready(function() {
    $('.col').each(function(){
        if($(this).height() > tallest)
           tallest = $(this).height();
    });
    $('.col').css('height', tallest + 'px');
});

Live Demo on Page Load http://jsfiddle.net/T9VUc/2/

UPDATE

Based on the URL you gave me, I suggest adding <div style='clear:both'></div> to the end of your 2nd div like this ...

<div id="Side" class="col">
    ...
</div>
<div class="content col">
    ...
    <div id="network" style="display: none;">
        ...
    </div>

    <div style='clear:both'></div>
</div>
Dutchie432
  • 28,798
  • 20
  • 92
  • 109
  • As a lot of the navigation is javascript based (the sidebar on the left), I don't see much harm in adding a bit more so I'm accepting this as the answer. – Logan Young Feb 22 '11 at 22:12
  • There is just 1 small problem... If you go to `http://www.pcbuddies.co.za/Services/Default.aspx` and click on the `Hardware Repair` item on the left, you'll see it – Logan Young Feb 22 '11 at 22:24
0

The other solutions look a bit too complicated to me. How about this:

Set both of your columns to transparent background and make a container for both of them with the desired background as alpha-transparent png.

Maybe not the "cleanest" solution, but definitely a simple one. Looking at the website you linked, that's what I'd go with.

Contraculto
  • 43
  • 1
  • 1
  • 4