views:

35

answers:

1

Hi, I am having a problem here with expanding parent div to fit child div.

Here's my code:

<div id="contentBlock">
    <div id="content" style="position: absolute; width: 740px; z-index: 4; left: 70px; min-height: 64%; top: 16%; height: auto">
        z<br />
        z<br />
        z<br />
        z<br />
        z<br />
        z<br />
        <br />
        z<br />
        <br />
        z<br />
        z<br />
        zz<br />
        <br />
        z<br />
        z<br />
        z<br />
        <br />
        z<br />
        z<br />
    </div>
    <div id="borderTop">
    </div>
    <div id="borderBottom">
    </div>
</div>

#contentBlock {
position: absolute;
width: 880px;
z-index: 1;
top: 380px;
left: 0px;
background-image: url('img/contentborder_tile.png');
min-height: 400px;
}

#borderTop {
    position: absolute; 
    width: 880px; 
    height: 105px; 
    z-index: 3; 
    top: 0px;
    background-image: url('img/contentBorder_top.png'); 
    left: 0px;
}

#borderBottom{
    position: absolute; 
    width: 880px; 
    height: 110px; 
    z-index: 2; 
    bottom: 0px; 
    background-image: url('img/contentborder_bottom.png'); 
    left: 0px;
}

and the output is shown here:

http://img641.imageshack.us/img641/6622/capturevim.png

The contentBlock does not expand when the content div expands in height.

How do I set contentBlock to expand to wrap content div in height?

Thank you very much!

A: 

try this

Anatoly G
may I know how to use that?
initialsHL
click on *this* above. it has a pane for HTML and a pane for CSS. This lets you see that the code is doing what you want - keeping the height on the content block based on its content.
Anatoly G