Setting height of div equal to containing div
- by Syom
i have the following simple script
<div id="content">
<div id="left">
<div id="menu">
<ul>
<li>menu</li>
</ul>
</div>
<div id="left_ad">
</div>
</div>
<div id="middle">
some text here...
</div>
<div id="right">
<div id="right_ad">
<div id="ad2">
</div>
</div>
</div>
</div>
css:
#content
{
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
#left
{
float: left;
width:25%;
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:-5000px;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:5000px;
}
#middle
{
background-image:url("http://localhost/kino/img/theme.png");
background-repeat:no-repeat;
float: left;
width:50%;
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:-5000px;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:5000px;
}
#right
{
float: left;
width:25%;
margin-left:0;
margin-right:-1px;
margin-top:0;
margin-bottom:-5000px;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:5000px;
}
#left_ad
{
background-image:url("http://localhost/kino/img/lens1.png");
background-repeat:no-repeat;
min-height:498px;
margin-left: auto;
margin-right: auto;
margin-top:31px;
padding:0;
width: 188px;
position: relative;
height: 100%;
}
as you see, left, middle and right have the same size of heigth, which is equal to max of them.
and now, what is the question, i want left_ad to have the same heigth too. how can i set the heigth of left_id is equal to left?
thanks