Question

I need to interface with the side column (reminders, etc.) and a central column where the content for each page.

I have two columns will be equal to their level and that I can do. The problem right column consists of three sections for the wallpaper. Has the top and bottom that have a fixed height. The middle part varies in height according to content in it.

My problem is that I need the middle section will match the height to that eventually all will be equal height column the second column.

I tried to do it with a script. The problem, when I use the jquery animate function column does not add height Banmtzih then created a small jump.

There is a way to do this?

My Code:

<div class="main_content">
    <div id="area_right">
        <div id="area_right_top">
            <div id="area_right_bottom">
                <div id="area_right_content">
                    My content..
                </div>
            </div>
        </div>
    <div>

    <div id="area_left">
        <div id="area_left_top">
            <div id="area_left_bottom">
                 <div id="area_left_content">
                    My left content
                 </div>
            </div>
        </div>
    </div>
</div>

Preview: Preview

Thanks!

Answer 1

I suggest you to use an other hierarchical embodiment of your division as here below, to use css style sheets and to use this trick.

<div class="main_content">
    <div id="area_right">
        <div class="wrarper">
            <!-- 100% height and margin-bottom -XXXpx throught CSS-->
            <div id="area_right_top"><!-- determined height throught CSS-->
            </div>
                    My content..
            <div class="push"></div><!-- height:XXXpx throught CSS-->
        </div>
        <div id="area_right_bottom"><!-- height:XXXpx throught CSS-->
        </div>
    <div>
    ect ect     
</div>

You may want to search “CSS sticky footer” in a search engine.