height problem

you propably heard alot of these kind of questions, but haven’t find a decent answer yet. I ussually have problems with IE (alot) and hate it to be honest, but this never happened before when creating websites.

So I try to set a border (10px) around the whole website (=wrapper div)
but for some reason it workes in IE but not in FF. In FF the wrapper shows a height of around 20px.

body{
margin: 0;
height: 100%;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #000000;
color: #b3b3b3;
}
#wrapper{
background: #000000;
margin: 0 auto 0 auto;
height: 100%;
width: 940px;
padding: 10px;
text-align: left;
border-style: solid;
border-color: #1a1a1a;
border-width: 10px;
}
#header{
float: left;
width: 960px;
height: 151px;
margin: -10px -10px 0 -10px;
background-image: url(images/logo_goowik.jpg);
}
#menu{
float: left;
width: 960px;
height: 46px;
margin: 0 -10px 0 -10px;
position: relative;
}
#container{
float: left;
margin: 10px 0 0 0;
width: 583px;
height: 100%;
border-right: 2px dotted #1a1a1a;
}
.sidebar{
float: left;
width: 345px;
height: 100%;
background: #000000;
margin: 0 0 0 10px;
}
#footer{
clear: both;
float: left;
width: 960px;
margin: 10px 0 0 -10px;
padding: 10px 0 0 10px;
border-top: 10px solid #1a1a1a;
}

I suppose you dont need the rest of the css.

Logicly this should work no? I mean the container, header, sidebar, menu, footer are set into the “wrapper” div . So when I say to the wrapper to set the div at height 100%, it should work. But as you may have guessed by now, it doesn’t.

Any help ? ??