0

This question follows on from one I recently asked here: Matching column height in 2column layout

I applied the JQuery fix suggested, but I now have a problem that if the column set presented on page load is shorter in height than another one as chosen by the submenu items on the left, the text in the content column runs over the footer.

http://www.pcbuddies.co.za/Services/Default.aspx (Click on the Hardware Repair link to see)

Here's the code:

<!-- JQuery matches the height of one column to the height of the other -->
<script type="text/javascript" src="../Data/jquery.js"></script>
<script type="text/javascript">
    var tallest=0;
    $(document).ready(function(){
        $('.col').each(function(){
            if($(this).height() > tallest)
                tallest = $(this).height();
        });
        $('.col').css('height', tallest + 'px');
    });

    // I had an idea to reset the column matching for the hardware repair
    // menuitem click which didn't work.
    $('#hardwareitem').click(function(){
        $('.col').each(function(){
            if($(this).height() > tallest)
                tallest = $(this).height();
        });
        $('.col').css('height', tallest + 'px');
    });
</script>

<li id="hardwareitem"><a onclick="cycle('hardware');">Hardware Repair</a></li>

<div id="hardware" style="display: none;"><!-- Content goes here --></div>

<!-- JS to change content is simply css class changes to make the selected content visible while hiding the currently visible content -->

I know JQuery probably isn't the best way to do this, but I just want to use it as a quick fix while applying a CSS solution.

Can anyone see a problem in the code or logic that would suggest why clicking #hardwareitem doesn't change the column height?

Community
  • 1
  • 1
Logan Young
  • 431
  • 1
  • 6
  • 22
  • Can't answer your question, but I use the jquery equalHeights plugin whenever I want to do stuff like this : http://www.cssnewbie.com/equalheights-jquery-plugin/ – JohnP Feb 23 '11 at 10:56
  • @JohnP - I just had a look at the plugin and it's not exactly what I'm looking for. I want to set the column height based on the height of the content column rather than specify a fixed height for both columns (which is what I was doing before the JQuery). – Logan Young Feb 24 '11 at 10:41
  • ah ok. The plugin just sets the height of the tallest container to all the containers that match the selector – JohnP Feb 24 '11 at 10:46

1 Answers1

0

You may want to consider bypassing the JavaScript for this altogether. There's a well known approach called faux column's that can achieve what you're looking for with CSS:

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

Kevinleary.net
  • 8,851
  • 3
  • 54
  • 46