...

View Full Version : CSS Question



Freon22
01-11-2010, 09:10 PM
I have a problem with my layout. What I am using is some nested divs so it looks like I have rounded borders. The problem is if I set the height of each div to 100% then as the content expands it will just layer over the div. If I don't use a height in the divs then it expands like it should as content is added. But if there is no or little content then the divs shrinks down to the content height. I want it all the divs to stay at a min-height: 100%; Any ideas on how to do this?

HTML


<div class="MainContentBorder">
<div class="ContentWraper">
<div class="MainContentArea">



</div>
</div>
</div>


CSS


.MainContentBorder {
background-color: #a3692b;
padding: 6px;
/*min-height: 100%;*/
}
.ContentWraper {
background-color: #000000;
background-image: url(images/MainBackground.gif);
/*height: 100%;*/
}
.MainContentArea {
/*height: 100%;*/
text-align: left;
padding: 10px;
margin: 0px;
}

abduraooft
01-12-2010, 07:08 AM
.MainContentArea{
/* for FF,Safari,Chrome etc */
height:auto !important;
min-height:200px;
/* for stupid IE*/
height:200px;
}

Freon22
01-12-2010, 01:49 PM
Your the man :) Thanks a ton. I have been messing with this for a few days. One question I understand all you have but one this "!important"

Anyway Thanks again!

abduraooft
01-12-2010, 02:45 PM
!important is to say all standard browsers that "this is very important, so you shouldn't override the value of this particular property when you encounter a different one" :)
Refer http://www.w3.org/TR/CSS21/cascade.html#important-rules



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum