how to inherit the height of a div tag to other 2 div tag height as (inherit) ?

[sidhx]

hey i am just beginner in CSS.I have attached the screen shoot. In this the Left-side inherit height of the main content but when i try to inherit for Right-side it don't work help me.

This is the HTML code inside body tag.

<div id="container">
<div id="header"><form action="logout.php" method="post"><p align="right"><input type="submit" name="signout" value="Sign Out" /></p></form></div>
 
<div class="main_panel_top_left"></div>
<div class="main_panel_top_center"><cite>Maga</cite>ssss</div>
<div class="main_panel_top_right"></div>
 
<div class="float_clear"></div>
 
 
<div class="main_panel_middle_left"></div>
 
<div class="main_panel_middle_center">
 
            <div class="wrapper_top_left"></div>
 
            <div class="wrapper_top_center"></div>
 
            <div class="wrapper_top_right"></div>
 
 
 
    <div class="wrapper_middle_left">
 
    <div class="wrapper_middle_center">
 
    <h2>HTML to Forget</h2>
    <p>CSS lets you write simpler HTML for one big reason: You can stop using a bunch
      of tags and attributes that only make a page better looking. The <font> tag is the
      most glaring example. Its sole purpose is to add a color, size and font to text. It
      doesn't do anything to make the structure of the page more understandable.
      Here's a list of tags and attributes you can easily replace with CSS:
      • Ditch <font> for controlling the display of text. CSS does a much better job
      with text. (See Chapter 6 for text-formatting techniques.)
      • Stop using <b> and <i> to make text bold and italic. CSS can make any tag
      bold or italic, so you don't need these formatting-specific tags. However, if you
      want to really emphasize a word or phrase, then use the <strong> tag (browsers
      display <strong> text as bold anyway). For slightly less emphasis, use the <em>
      tag (browsers italicize content inside this tag). 
     </p>
 
</div> <div class="wrapper_middle_right" >
      </div>  
     </div>  
 
 
 
 
    <div class="wrapper_bottom_left"></div>
 
    <div class="wrapper_bottom_center"></div>
 
    <div class="wrapper_bottom_right"></div>
 
</div>
 
<div class="main_panel_middle_right"></div>
 
<div class="float_clear"></div>
 
<div class="main_panel_bottom_left"></div>
 
<div class="main_panel_bottom_center"></div>
 
<div class="main_panel_bottom_right"></div>
 
<div class="float_clear"></div>
<div id="footer" align="center"><address>Copyright © 2011 XXXXXXXX. All rights reserved.</address> </div>
</div>
 

This is CSS code

#container{    
    margin-top: 10px;
    margin-left:10%;
    margin-right:10%;
    margin-bottom: 10px;
    background-color:#FFF;
    width:995px;/*80%;*/
    height:100%;
}
 
#header{
    height:20px;
    padding:20px;
 
}
#footer{    
 
}
/*              main gray panel layout                         */
 
/* top layout */
 
.main_panel_top_left{
    float:left;
    background-image:url(images/wrapper_topl.png);
    width:8px;
    height:51px;
 
}
.main_panel_top_center{
    float:left;
    background-image:url(images/wrapper_top.png);
    background-repeat:repeat-x;
    height:51px;
    width:975px;
 
}
.main_panel_top_right{
    float:left;
    background-image:url(images/wrapper_topr.png);
    width:8px;
    height:51px;
}
 
 
/* middle layout */
 
.main_panel_middle_left{
    float:left;
    background-image:url(images/wrapper_10.png);
    width:8px;
    background-repeat:repeat-y;
 
    height:inherit; /* i want it to auto or inhert*/
    /*height:250px;*/    
    /* height:317px;*/
 
}
.main_panel_middle_center{
    float:left;
    width:975px;
    height:inherit;
 
}
.main_panel_middle_right{
 
    float:left;
    background-image:url(images/wrapper_15.png);
    width:8px;
    background-repeat:repeat-y;
    height:inherit; /* i want it to auto or inhert*/
    /*height:317px;*/    
    /*    height:250px; */
}
 
/* bottom layout */
 
.main_panel_bottom_left{
    float:left;
    background-image:url(images/wrapper_bottoml.png);
    width:8px;
    height:41px;
}
.main_panel_bottom_center{
        float:left;
    background-image:url(images/wrapper_bottom.png);
    background-repeat:repeat-x;
    height:41px;
    width:975px;
}
.main_panel_bottom_right{
        float:left;
    background-image:url(images/wrapper_bottomr.png);
    width:8px;
    height:41px;
}
/*              main gray panel layout  end                       */
    #box{
        float:left;
        padding-right:20px;
        padding-left:20px;
    }
 
    .float_clear{
    clear:both;
    }
 
 
/*                   inner gray panel wrapper                                 */    
 
.wrapper_top_left{
    float:left;
    background-image:url(images/wrapper_11.png);
    width:4px;
    height:12px;
 
}
 
.wrapper_top_center{
    float:left;
    width:967px;
    height:4px;
}
 
.wrapper_top_right{
    float:left;
    background-image:url(images/wrapper_14.png);
    width:4px;
    height:12px;
}
 
.wrapper_middle_left{
 
    float:left;    
    background-image:url(images/wrapper_17.png);
    width:4px;
    /*height:300px; 233px;*/
    height:inherit; /* i want it to auto or inhert*/
    background-repeat:repeat-y;
 
}
 
.wrapper_middle_center{
    padding:5px;
 
    float:left;
    width: 940px;/*99.2%;*/
    min-width:600px;
 
}
 
.wrapper_middle_right{
    float:right;
    background-image:url(images/wrapper_19.png);
    width:4px;
    height:inherit; /* i want it to auto or inhert*/
    /*height:300px;*/
    background-repeat:repeat-y;
}
 
 
.wrapper_bottom_left{
    float:left;    
    background-image:url(images/wrapper_22.png);
    width:4px;
    height:5px;
 
    clear:left;
 
}
 
.wrapper_bottom_center{
    float:left;
    background-image:url(images/wrapper_23.png);
    background-repeat:repeat-x;
    width:967px;
    height:5px;
 
}
 
.wrapper_bottom_right{
    float:left;
    background-image:url(images/wrapper_25.png);
    width:4px;
    height:5px;
 
 
}
 
 
/*                 End  inner gray panel wrapper                                 */    

I want it as the class="wrapper_ middle_center" content increases the other two class like wrapper_middle_ left and wrapper_middle_ right its height should inherit from the class wrapper_middle_ center.Looking forward for yours guideline.

[sidhx]

i can do using table tag but how to do using div tag

[hellodipak]

You can do it using jquery -

Include this library: http://ajax.aspnetcdn.com/ajax/jQuer...y-1.6.1.min.js

And then the following

<script type="text/javascript">
$(document).rea dy(function(){
var contentDivHeigh t = $(".contentDiv" ).height();
$(".leftDiv, .rightDiv").css ("min-height", contentDivHeigh t);
});
</script>

[drhowarddrfine]

You have no height specified. You do say to inherit, and one div says its height is 100%, but 100% of what? The body? So what is the body's height? That's not set anywhere.

@hellodipak - never use javascript to do CSS's job.