Stretch column

hallo group,

I have a problem with streching divs to 100%. i have the following div layout:

<div class="Application">
<div class="Header"></div>
<div class="NavMenu"></div>
<div class="Wrapper">
<div class="MainNav"></div>
<div class="MainContent"></div>
</div>
<div class="Footer" id="Footer"></div>
</div>

.Application {
border: 1px solid #000000;
margin:5px;
padding:5px;
min-height:100%;
width:98%;

}

.NavMenu {
border: 1px solid #000000;
position: relative;
height: 19px;
margin-bottom: 5px;
background-color: #1c0b5b;
}

.Header {
border: 1px solid #000000;
position:relative;
height: 80px;
margin-bottom:5px;
text-align:right;
}

.Wrapper {
min-height:100%;
/*height:auto !important; /* voor moderne browsers */
/*height:100%; voor IE */
padding:5px;
border: 1px solid #000000;
}
.MainNav {
min-height:100%;
float:left;
width:27%;
border: 1px solid #000000;
padding-bottom:5px;
background: #ccc url('gfx/filler.png') repeat-y left top;
}

.MainContent {
min-height:100%;
float:right;
width:71%;
padding-left:5px;
margin-left:5px;
border: 1px solid #000000;
padding-bottom:5px;
}

.Footer {
clear:both;
border:1px solid #000000;
height:19px;
background-color: #1c0b5b;
text-align: center;
color: #FFFFFF;
font-weight: bold;
bottom:5px;
position:relative;
width:100%
}

The problem is that the MainNav and MainContent won't stretch to 100%

Anybody can help me with this?

Thanks

Rene

 

Not quite sure what you are going for, but if you want 100% height, then simply add: body,html { height:100%; }

 

yes and take out the min height in nav and content and it should work