I have the following HTML + CSS code:

HTML Code:
<html>
<head>
<title>Sample 3 columns</title>
<style>
#wrapper {
	text-align: left;
	margin: 0px auto;
	padding: 0px;
	border:0;
	width: 100%;
}

#header {
	margin: 0 0 15px 0;
	background: yellow;
}

#side-a {
	float: left;
	width: 20%;
}

#side-b {
	float: right;
	width: 35%;
}

#content { 
	float: left;
	width: 45%
}

#footer {
	clear: both;
	background: #A2A2A2;
}

.Sandbox
{
  border-left:1px solid #bbb;
  border-right:1px solid #bbb;
  border-bottom:1px solid #bbb;
  border-top:1px solid #bbb;
  margin-top:5px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;
  padding-top:10px;
  padding-left:15px;
  padding-right:15px;
  padding-bottom:10px
}

</style>
</head>

<body>

<div id="wrapper">

  <div id="header">HEADER</div>
	
  <div id="container">
	
    <div id="side-a">
      <div class="Sandbox">LEFT</div>
    </div>
		
    <div id="content">
      <div class="Sandbox">
        <div class="Sandbox">CONTENT</div>
        <div class="Sandbox">MORE CONTENT</div>
      </div>			
    </div>
		
    <div id="side-b">
      <div class="Sandbox">RIGHT</div>
    </div>
  </div>
	
  <div id="footer">FOOTER</div>
	
</div>

</body>
</html>
What I want is make the left and right boxes equal in height with the middle one. So far I could not find how. Can anybody help? Thank you.