View Full Version : CSS Question

01-11-2010, 10: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?


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



.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;

01-12-2010, 08:08 AM
/* for FF,Safari,Chrome etc */
height:auto !important;
/* for stupid IE*/

01-12-2010, 02: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!

01-12-2010, 03: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