CODEWITHSUNDEEP
javascripthtmlcss
Dusty Arlia
Dusty Arlia

Reputation: 77

div height needs to grow based on div next to it

Here's the url to the page: http://whiterootmedia.com/test I need the right brown div to grow when the grey div content expands. I'm vertically repeating a background image in the brown div. 

<body style="margin: 0px; min-width: 700px; height: 100%;">
    <div class="site" style="background: yellow; min-width: 577px; height: 100%;">
        <div class="banner" style="background: blue; height: 100px; width: 417px; float: left;">
            Banner Banner Banner Banner Banner
        </div>
        <div class="body_container" style="background: pink; height: 100%;">
            <div class="ads" style="background: brown; width: 160px; position: absolute; right: 0px; height: 100%; clear: left;">
                Ads Ads Ads Ads Ads Ads Ads Ads Ads
            </div>
            <div class="tree" style="background: grey; white-space: nowrap; width: auto; min-width: 417px; clear: left;">
                Content Content Content Content Content Content Content Content Content Content
                <br />
            </div>
        </div>
        <div class="grass" style="background: green; height: 100px;">
        </div>
    </div>
</body>

Upvotes: 1

Views: 669

Answers (3)

simoncereska
simoncereska

Reputation: 3043

there is easy way, set overflow: hidden for wrapper and for columns set padding-bottom: 9999px; margin-bottom: -9999px;

Upvotes: -1

Sanooj
Sanooj

Reputation: 2637

Try using this script

var tree_height = $('.tree').height();
var tree_top = $('.tree').offset().top;
var ads_height = tree_height + tree_top ;
$('.ads').css('height',ads_height);

Upvotes: 0

Andrew Vit
Andrew Vit

Reputation: 19239

The classic way of doing this is using a technique called Faux Columns.

The idea is to put the repeating background image on the container, and background-position: 100% 0 to put it on the right side and make it look like it's the background of the right column. (The right column would have a transparent background.)

You don't need to worry about the height of the column, since the background fills the height of the container instead.

Upvotes: 4

Related Questions