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.
This is CSS code
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.
This is the HTML code inside body tag.
Code:
<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>
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.
Comment