Div is 0px tall - html

Question

My <div> with id="page" contains a full page. My <div> with id="main" is 25px (the 25px is only coming from it having padding) tall and should be a full page tall still. Mywithid="container"` is inside main and should be a full page tall without the footer but it is 0px tall which is causing its inner elements to spill out of it.
Mywithid="container"` is not containing its inner HTML elements. They are spilling out of the container. How do I make them not spill out? Here is the HTML, CSS, and and image of what it looks like showing me hovering over "main" and it taking 25px. Cheers.
HTML:
<div id="page"
<div id="main">
<div id="container">
<div id="left-hand-side"></div>
<div id="right-hand-side">
<img src="resources/Logo.png"/>
<?wp_nav_menu(array('theme_location'=>'primary', 'menu_class'=>'nav-menu'));?>
</div>
</div>
CSS:
/*
Theme Name: 2011-child-theme-commons
Description: Child theme for the Commons website
Author: admin
Template: twentyeleven
(optional values you can add: Theme URI, Author URI, Version)
*/
#import url("../twentyeleven/style.css");
#branding {
display:none;
}
.nav-menu .menu-item {
font-size:2em;
margin-bottom: 70px;
margin-right:30px;
list-style-type: none;
text-decoration:none;
float: right;
}
.nav-menu .menu-item a {
color:#333;
}
.first_menu_item a:hover {
color:#FEBA2E;
list-style-type: none;
text-decoration:none;
}
.second_menu_item a:hover {
color:#FF46C8;
list-style-type: none;
text-decoration:none;
}
.third_menu_item a:hover {
color:#2B6AFF;
list-style-type: none;
text-decoration:none;
}
#comments {
display:none;
}
body {
background: #FFF;
}
#container {
margin-top:-24px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
position:relative;
background: url("../../../resources/plan_edited.png") no-repeat;
background-size:contain;
height: 100%;
width: 100%
}
#colophon {
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
#right-hand-side img {
margin:auto;
z-index:2;
width:100%;
}
#right-hand-side h1 {
float:right;
margin-right:30px;
margin-bottom:50px;
font-size:2em;
cursor:pointer;
}
#logo {
cursor:pointer;
}
#right-hand-side {
float:right;
width:36%;
position:absolute;
height:inherit;
z-index:2;
margin-left:64%;
}
#left-hand-side {
z-index:3;
height:inherit;
width:64%;
float:left;
position:absolute;
}
#left-hand-side article {
background-color:#FFF;
margin-left:10%;
margin-top:10%;
margin-right:10%;
border:#666 1px solid;
position:absolute;
padding-top:2em;
}
#left-hand-side .entry-content {
padding: 0.5em;
width: 85%;
}
#left-hand-side .entry-header {
width: 85%;
}

Answer 1

It isn't containing it because on the #right-hand-side you have a margin on your image of 90px so that will force the image out of the box.
http://jsfiddle.net/Cb5h8/

Answer 2

What you are experiencing is that elements to not automatically resize to contain their floated child elements. The term used for the remedy is "Clearing floats". There are multiple ways to do that, the easiest one is probably just to add overflow:auto; to the container. It will force the container to contain its floated children.
Detailed information can be seen here: http://www.quirksmode.org/css/clearing.html
#container {
margin-top:-24px;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
position:relative;
background: url("../../../resources/plan_edited.png") no-repeat;
background-size:contain;
height: 100%;
width: 100%;
overflow: auto;
}
EDIT:
The #left-hand-side and #right-hand-side styles are positioned absolutely, which prevents the #container from properly containing them. You need to remove the position:absolute; styles. If you really need the position:absolute; styles, then the only way for you to accomplish this is by giving the container a specific height, which is enough for it to contain it's children.