Why is CSS acting strange?

Question

I am making a page and want my outline to be like:

All was going well, until I started to add in the main text and side bars. The side bars would not stretch down to the bottom. I tried using height: 100% with no luck. Current site:

CSS:

#wrapper
{
margin: auto auto auto auto;
text-align: center;
border: 10 Black;
background-color: Black;
width: 50%;
}

#left
{
    float: left;
border-right: 2px white;
width: 25%;
background-color: Black;
height: 100%;
}

#right
{
    float: right;
border-left: 2px white;
width: 25%;
background-color: Black;
height: 100%;
}

body 
{
color : Yellow;
background-color: #585858;
width: 960;
height: 100%;
}

.text
{
text-align: center;
margin-left: auto;
margin-right: auto;
float: none;
border: 10px White;
}

HTML:

<div id="right">
<img class="sideimg" src="data/images/kinected logo.png" height="150" width="150"/>
</div>
<div id="left">
<img class="sideimg" src="data/images/kinected logo.png" height="150" width="150"/>
</div>
<div id="wrapper">
<h1>Main header goes here</h1>
<div id="text">
<p>Main text goes here</p>
</div>
</div>

Answer 1

Add the following:

html,body{height:100%}

Take a Look