Question

How can I make my center div the same height as the Left SideBar2 if and only if the center div is smaller than the Left SideBar2?
I’m not sure if this can be done with pure CSS or if I should be using JS for this and how?

My page

Answer 1

This should be done with javascript… here i’ll use jquery.
Put this in your tags and make appropriate changes.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    (function () {
        function changeHeight() {
            $centerDiv = $('#centerDivId');
            $leftBar = $('#leftBarId');
            if ($centerDiv.height() < $leftBar.height()) {
                $centerDiv.css('height', $leftBar.height())
            }
        }
    });
</script>