auto expand div height

tags:

css
html

views:

132

answers:

auto expand div height

alt text

<html><head><title>Test</title>
<style>
.main{width:600px;border:1px solid red; }
.main .left{background:lightblue; width:100px;clear:both; float:left;}
.main .right{margin-left:100px;background:lightyellow; }
</style>
    </head><body>
<div class="main">
    <div class="left">
    title
    </div>
    <div class="right">
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
        <div id="item">item</div>
    </div>
</div>
</body></html>

How to change the CSS to make the page display like the dialog shows?

PS,I think it's a way that to make the "left" div's height auto expand when the height of the "right" div or parent div expand, but I don't know how.

Here is different totally style that works:

.main{width:600px;border:1px solid red; height:auto; position:relative }
.main > div {display:inline-block; vertical-align:top; }
.main .left{background:lightblue; width:100px; height: 100%; }
.main .right{margin-left:5px; background:lightyellow; height: 100% }

You may want to go through this CSS tutorials at w3schools.

Pablo 2010-04-14 17:39:23

Thanks very much,it's one step closer to what I want. Hope it will be like that the right div's height is auto and expands when having more content,and the left div's height will auto expands to be equal to the right.

Geln Yang 2010-04-15 01:49:19

Now i get that the left div'height can be auto expand only when the main div's height could be calculated.

Geln Yang 2010-04-16 01:35:12

ansaurus

tags:

views:

answers:

auto expand div height

related questions