Ciao a tutti!

Come da titolo ho un problema con il div container.

La mia idea sarebbe di inserire tre colonne all'interno di un container di dimensioni orizzontali fisse ma che verticalmente si adattino tutte e tre alla colonna più lunga. E che tra lo spazio libero lasciato appositamente tra le colonne il background-color che si veda sia quello del container.

Non capisco perchè però il div container non sembra proprio contenere le tre colonne.. Anche perchè ho cercato di scrivere solo il codice minimo per avere un esempio.. I tre div leftside, center e rightside sono tutti dichiarati all'interno del div container, quindi inizio a pensare che forse mi manca qualche nozione di base..

Questo è il codice, se qualcuno potesse gentilmente aiutarmi gli sarei grato! Grazie!

P.S.
Ho inserito il padding nel container perchè altrimenti proprio non riuscivo a trovarlo ed a vederlo...


codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body
{
	background-color: #4E5869;
}

#container
{
	background-color: red;
	width:1000px;
	height:100%;
	margin: 0px auto;
	padding:20px;
	border: 5px solid black;
}

#leftside
{
	background-color:lightgrey;
	width:110px;
	min-height:100%;
	margin:0px;
	margin-right:15px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#center
{
	background-color:green;
	width:750px;
	min-height:100%;
	margin:0px;
	margin-right:15px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#rightside
{
	background-color:lightgrey;
	width:110px;
	min-height:100%;
	margin:0px;
	float:left;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

#footnote
{
	background-color:darkgrey;
	width:1000px;
	height:30px;
	clear:both;
	margin: 0px auto;
	border-radius: 10px;
            -moz-border-radius: 10px; /* firefox */
            -webkit-border-radius: 10px; /* safari, chrome */
}

</style>


</head>

<body>


<div id="container">

	<div id="leftside">
    	

 Qui ci sarà il menù laterale. </p>
    </div>
    
    <div id="center">
    	

 Qui ci sarà il main. </p>
    </div>
    
    <div id="rightside">
    	

 Qui ci saranno i banner. </p>
    </div>

</div>

<div id="footnote">
	

 Qui ci saranno i diritti</p>
</div>

</body>
</html>