Question

I’ve got a slight problem. I’ve got a page layout with a left column and a right column. I want to make the columns equal, so I’ve been using some javascript which equals them out quite nicely. However within the right column, I have a div which I would like to hide onload, and toggle when pressed. I’m using jquery to acheive this with good results. The problem is the first javscript is fixing the height of both the columns, if I have a height fixed that is not as deep then when the user toggles to view content, the content floats above the bottom line of both columns. Hope that makes sense.

I was thinking if I convert everything to jquery, I might have a fighting chance of passing the size of the height of the right container before it is hidden and then adding the height of the column right if its too small and then levelling both columns out.

This is quite difficult to explain, but hopefully someone out there undertands what I am trying to acheive.

    <script type="text/javascript">
    $(document).ready(function () {
        var contact_height = $("#ContentBlock").height();

        $("#ContentBlock").hide();

        $(".contact-us").click(function () {

            if ($('#ContentBlock').is(":hidden")) {
                $('#arrowopenclose').removeClass("panelCollapsed");
                $('#arrowopenclose').addClass("panelExpanded");
            } else {
                $('#arrowopenclose').removeClass("panelExpanded");
                $('#arrowopenclose').addClass("panelCollapsed");
            }

            $("#ContentBlock").slideToggle('fast');
            return false;
        });

    })
</script>



<script type="text/javascript">
function fixHeight(one, two) {
    if (document.getElementById(one)) {
        var lh = document.getElementById(one).offsetHeight + 15;

        //figure out how tall rh is and add contact_height + 15 if the space is smaller then contact_height
        var rh = document.getElementById(two).offsetHeight;
        var nh = Math.max(lh, rh);
        document.getElementById(one).style.height = nh + "px";
        document.getElementById(two).style.height = nh + "px";
    }
}

window.onload = function () {
    fixHeight('rightcolumn', 'content-container');
}
</script>

Answer 1

I’ve taken Rodolfo’s advice and recreated equal sized columns using pure css. Thanks to all that replied.