Vertically Extending Divs (Height 100% goes wild!)

tried making html/body 100% as well.

[kickerman360]

Hey,
I am building a footer which is 900px by Xpx wide (div extends vertically). I can't make the height fixed since it's dynamic. I am trying to make the divs have heights of 100% (including the html and body tags) but for some reason the div with the class footer (acts like a wrapper) goes insane and instead of being the proper height it is around 1000px (from my estimates)

Here's the relevant code:

The CSS

body, html {
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #000000;
color: #FFFFFF;
text-align: center;
margin:0;
padding:0;
background: url(images/bg.jpg) top center repeat;
background-color:#000000;
height:100%;
}
/* --------------------------------------------------------------------------------------------- */
/* Footer */
/* --------------------------------------------------------------------------------------------- */
.footer {
width: 900px;
margin: 5px auto;
padding:5px 0 5px 0;
clear:both;
border: solid 0px #FF0000;
background: url(images/bgt.png) top center repeat;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.footerinner {
padding:5px;
margin: 0 5px;
background: url(images/bgt.png) top center repeat;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.footer p{
margin:0;
padding:0;
}
.footerwidgetinner {
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
text-align:left;
background: url(images/bgt.png) top center repeat;
padding: 5px;
margin:0 5px 0 0;
height:100%;
}
.footerwidgetouter {
 width: 25%;
float:left;
clear: none;
padding: 0px;
margin:0;
border: solid 0px #FF0000;
height:100%;
 }
.footer h2, .footer h3 {
 font-size: 12pt;
 font-weight: normal;
 color: #dfdfdf;
 letter-spacing: -1px;
 border-bottom: 1px dotted #444;
 margin: 0;
 padding: 0 0 5px 0;
}
.footerwidgetinner li {
list-style-type: none;
list-style-image: none;
margin:0;
padding:0;
}
.footerwidgetinner ul {
margin:0;
padding:0 0 0 5px;
}

The HTML

<div class="footer">
 <div class="footerwidgetouter">
 <div class="footerwidgetinner" style="margin:0 5px">
CONTENT
 </div>
 </div>
 <div class="footerwidgetouter">
 <div class="footerwidgetinner">
CONTENT CONTENT
 </div>
 </div>
 <div class="footerwidgetouter">
 <div class="footerwidgetinner">
CONTENT CONTENT
 </div>
 </div>
 <div class="clear"></div>
</div>
<div class="footer">
<div class="footerinner">
CONTENT CONTENT (copyright stuff)
</div>
</div>

Note: there is no wrapper around the footer(s)

I've looked at some other posts which say to make html and body have 100% height as well which I have done. Also I have been told that margin-top/bottom:0; makes divs extend vertically as well but not for me

screws up in IE and FF

let me know if u need more info!

btw i am semi new here, i browse the forums all the time for help, but this is the first time my question reminas unanswered! thanks for any help!

[swa66]

height:100% gives an element the height of its direct parent if that has been set explicitly and is different form auto.
The only exception I know it the root element: it's got the height of the viewport.

So you height: 100% on footerwidgetouter won't have a direct parent to hook onto (footer not having an explicitly set height) and it'll become "auto".

[kickerman360]

oh sorry, this code must have been while I was trying to figure it out. I understand all the parent elements need to have defined widths, when .footer is set to height:100%; is when it does something weird.

Would having a wrapper around it fix the issue?