php - Adjust the left container as per right container height without using height property in css

Question

I have two divs one left side and another right side . In right side contents are dynamically loaded by click the left side menus. Based on the contents height the left side container also increase by same height. i attached screenshot for this problem

Expected result be:

![enter image description here][3]

Any help be appreciated. Thanks

Answer 1

You can achieve this as follows, basically we are using position relative and playing with it

Demo

HTML

<div id="container2">
    <div id="container1">
        <div id="col1">
            <!-- Column one start -->

        </div>
        <div id="col2">
            <!-- Column two start -->

        </div>
    </div>
</div>

CSS

#container2 {
    clear:left;
    float:left;
    width:100%;
    overflow:hidden;
    background:#ffa7a7; /* column 2 background colour */
}
#container1 {
    float:left;
    width:100%;
    position:relative;
    right:50%;
    background:#fff689; /* column 1 background colour */
}
#col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

Original Article