469,326 Members | 1,320 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,326 developers. It's quick & easy.

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

50
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.
Expand|Select|Wrap|Line Numbers
  1. <div id="container">
  2. <div id="header"><form action="logout.php" method="post"><p align="right"><input type="submit" name="signout" value="Sign Out" /></p></form></div>
  3.  
  4. <div class="main_panel_top_left"></div>
  5. <div class="main_panel_top_center"><cite>Maga</cite>ssss</div>
  6. <div class="main_panel_top_right"></div>
  7.  
  8. <div class="float_clear"></div>
  9.  
  10.  
  11. <div class="main_panel_middle_left"></div>
  12.  
  13. <div class="main_panel_middle_center">
  14.  
  15.             <div class="wrapper_top_left"></div>
  16.  
  17.             <div class="wrapper_top_center"></div>
  18.  
  19.             <div class="wrapper_top_right"></div>
  20.  
  21.  
  22.  
  23.     <div class="wrapper_middle_left">
  24.  
  25.     <div class="wrapper_middle_center">
  26.  
  27.     <h2>HTML to Forget</h2>
  28.     <p>CSS lets you write simpler HTML for one big reason: You can stop using a bunch
  29.       of tags and attributes that only make a page better looking. The <font> tag is the
  30.       most glaring example. Its sole purpose is to add a color, size and font to text. It
  31.       doesn't do anything to make the structure of the page more understandable.
  32.       Here's a list of tags and attributes you can easily replace with CSS:
  33.        Ditch <font> for controlling the display of text. CSS does a much better job
  34.       with text. (See Chapter 6 for text-formatting techniques.)
  35.        Stop using <b> and <i> to make text bold and italic. CSS can make any tag
  36.       bold or italic, so you don't need these formatting-specific tags. However, if you
  37.       want to really emphasize a word or phrase, then use the <strong> tag (browsers
  38.       display <strong> text as bold anyway). For slightly less emphasis, use the <em>
  39.       tag (browsers italicize content inside this tag). 
  40.      </p>
  41.  
  42. </div> <div class="wrapper_middle_right" >
  43.       </div>  
  44.      </div>  
  45.  
  46.  
  47.  
  48.  
  49.     <div class="wrapper_bottom_left"></div>
  50.  
  51.     <div class="wrapper_bottom_center"></div>
  52.  
  53.     <div class="wrapper_bottom_right"></div>
  54.  
  55. </div>
  56.  
  57. <div class="main_panel_middle_right"></div>
  58.  
  59. <div class="float_clear"></div>
  60.  
  61. <div class="main_panel_bottom_left"></div>
  62.  
  63. <div class="main_panel_bottom_center"></div>
  64.  
  65. <div class="main_panel_bottom_right"></div>
  66.  
  67. <div class="float_clear"></div>
  68. <div id="footer" align="center"><address>Copyright  2011 XXXXXXXX. All rights reserved.</address> </div>
  69. </div>
  70.  
This is CSS code

Expand|Select|Wrap|Line Numbers
  1. #container{    
  2.     margin-top: 10px;
  3.     margin-left:10%;
  4.     margin-right:10%;
  5.     margin-bottom: 10px;
  6.     background-color:#FFF;
  7.     width:995px;/*80%;*/
  8.     height:100%;
  9. }
  10.  
  11. #header{
  12.     height:20px;
  13.     padding:20px;
  14.  
  15. }
  16. #footer{    
  17.  
  18. }
  19. /*              main gray panel layout                         */
  20.  
  21. /* top layout */
  22.  
  23. .main_panel_top_left{
  24.     float:left;
  25.     background-image:url(images/wrapper_topl.png);
  26.     width:8px;
  27.     height:51px;
  28.  
  29. }
  30. .main_panel_top_center{
  31.     float:left;
  32.     background-image:url(images/wrapper_top.png);
  33.     background-repeat:repeat-x;
  34.     height:51px;
  35.     width:975px;
  36.  
  37. }
  38. .main_panel_top_right{
  39.     float:left;
  40.     background-image:url(images/wrapper_topr.png);
  41.     width:8px;
  42.     height:51px;
  43. }
  44.  
  45.  
  46. /* middle layout */
  47.  
  48. .main_panel_middle_left{
  49.     float:left;
  50.     background-image:url(images/wrapper_10.png);
  51.     width:8px;
  52.     background-repeat:repeat-y;
  53.  
  54.     height:inherit; /* i want it to auto or inhert*/
  55.     /*height:250px;*/    
  56.     /* height:317px;*/
  57.  
  58. }
  59. .main_panel_middle_center{
  60.     float:left;
  61.     width:975px;
  62.     height:inherit;
  63.  
  64. }
  65. .main_panel_middle_right{
  66.  
  67.     float:left;
  68.     background-image:url(images/wrapper_15.png);
  69.     width:8px;
  70.     background-repeat:repeat-y;
  71.     height:inherit; /* i want it to auto or inhert*/
  72.     /*height:317px;*/    
  73.     /*    height:250px; */
  74. }
  75.  
  76. /* bottom layout */
  77.  
  78. .main_panel_bottom_left{
  79.     float:left;
  80.     background-image:url(images/wrapper_bottoml.png);
  81.     width:8px;
  82.     height:41px;
  83. }
  84. .main_panel_bottom_center{
  85.         float:left;
  86.     background-image:url(images/wrapper_bottom.png);
  87.     background-repeat:repeat-x;
  88.     height:41px;
  89.     width:975px;
  90. }
  91. .main_panel_bottom_right{
  92.         float:left;
  93.     background-image:url(images/wrapper_bottomr.png);
  94.     width:8px;
  95.     height:41px;
  96. }
  97. /*              main gray panel layout  end                       */
  98.     #box{
  99.         float:left;
  100.         padding-right:20px;
  101.         padding-left:20px;
  102.     }
  103.  
  104.     .float_clear{
  105.     clear:both;
  106.     }
  107.  
  108.  
  109. /*                   inner gray panel wrapper                                 */    
  110.  
  111. .wrapper_top_left{
  112.     float:left;
  113.     background-image:url(images/wrapper_11.png);
  114.     width:4px;
  115.     height:12px;
  116.  
  117. }
  118.  
  119. .wrapper_top_center{
  120.     float:left;
  121.     width:967px;
  122.     height:4px;
  123. }
  124.  
  125. .wrapper_top_right{
  126.     float:left;
  127.     background-image:url(images/wrapper_14.png);
  128.     width:4px;
  129.     height:12px;
  130. }
  131.  
  132. .wrapper_middle_left{
  133.  
  134.     float:left;    
  135.     background-image:url(images/wrapper_17.png);
  136.     width:4px;
  137.     /*height:300px; 233px;*/
  138.     height:inherit; /* i want it to auto or inhert*/
  139.     background-repeat:repeat-y;
  140.  
  141. }
  142.  
  143. .wrapper_middle_center{
  144.     padding:5px;
  145.  
  146.     float:left;
  147.     width: 940px;/*99.2%;*/
  148.     min-width:600px;
  149.  
  150. }
  151.  
  152. .wrapper_middle_right{
  153.     float:right;
  154.     background-image:url(images/wrapper_19.png);
  155.     width:4px;
  156.     height:inherit; /* i want it to auto or inhert*/
  157.     /*height:300px;*/
  158.     background-repeat:repeat-y;
  159. }
  160.  
  161.  
  162. .wrapper_bottom_left{
  163.     float:left;    
  164.     background-image:url(images/wrapper_22.png);
  165.     width:4px;
  166.     height:5px;
  167.  
  168.     clear:left;
  169.  
  170. }
  171.  
  172. .wrapper_bottom_center{
  173.     float:left;
  174.     background-image:url(images/wrapper_23.png);
  175.     background-repeat:repeat-x;
  176.     width:967px;
  177.     height:5px;
  178.  
  179. }
  180.  
  181. .wrapper_bottom_right{
  182.     float:left;
  183.     background-image:url(images/wrapper_25.png);
  184.     width:4px;
  185.     height:5px;
  186.  
  187.  
  188. }
  189.  
  190.  
  191. /*                 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.
Attached Images
File Type: jpg wrapper.jpg (25.0 KB, 498 views)
Apr 26 '11 #1
3 8541
sidhx
50
i can do using table tag but how to do using div tag
Apr 26 '11 #2
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).ready(function(){
var contentDivHeight = $(".contentDiv").height();
$(".leftDiv, .rightDiv").css("min-height", contentDivHeight);
});
</script>
May 18 '11 #3
drhowarddrfine
7,435 Expert 4TB
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.
May 18 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by glenn | last post: by
3 posts views Thread by darrel | last post: by
12 posts views Thread by Jack Gavrich | last post: by
5 posts views Thread by hzgt9b | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.