[HTML&CSS] Perchè non basta lo spazio verticale?

[D4rkAng3l]

Stò realizzando il mio sito, se andate quà potete trovare la pagina che mi stà creando qualche problema: http://www.siatec.net/andrea/prove/categoriegal.html

Se vedete è come se mancasse lo spazio in fondo (e devo inserire ancora altre categorie)...è come se fosse troppo poco alta (in pratica non compare la barra di scorrimento verticale).

Il codice html potete tranquillamente visualizzarlo dal broswer, il codice CSS invece è il seguente:


body{
margin: 0;
padding: 0;
margin-bottom: 0.95em;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
background-color: #fff;
line-height: 180%;
}
#header{
margin: 0 auto;
width: 760px;
height: 283px;
border: 1px solid #000;
border-top: 1px;
border-bottom: 1px;
background-image: url("img/sfondo.jpg");
background-repeat: no-repeat;
background-position: right bottom;
background-color: #8a9bac;
color: #000;
}
#header h1{
margin: 0;
font: normal 280% Georgia, "Times New Roman", Times, serif;
color: #000;
background-color: #a9c2d8;
padding-left: 0.6em;
padding-top: 0.1em;
}
#menu{
margin: 0 auto;
width: 760px;
background: #41545F;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
color: #fff;
}
#gallery{
margin: 0 auto;
width: 760px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
background-color: #a9c2d8;
}
#gallery a:link{
color: #000;
}


#menu ul{
margin: 0;
padding-left: 0;
list-style: none;
overflow:hidden;
height:auto;
}
#menu li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu a:link, #menu a:visited{
float: left;
background: #41545F;
color: #fff;
margin: 0em;
padding: 0.3em 1.5em 0.3em 1.5em;
text-decoration: none;
border-right: 1px solid #000;
}
#menu a:hover, #menu a:focus, #menu a:active{
color: #B2CEDC;
background: #05181E;
}
#content{
margin: 0 auto;
width: 740px;
padding: 1.25em 0.8em;
border: 1px solid #000;
border-top: 0;
border-bottom: 0;
background: #fff;
color: #000;
}
.categoria{
float: left;
margin-right: 30px;

}



#content p {
font-size: 100%;
line-height: 1.8em;
padding-left: 1em;
padding-right: 1em;
}
#content h1 {
padding-bottom: 0.3em;
padding-top: 0.3em;
font: normal 180% Georgia, "Times New Roman", Times, serif;
color: #05181E;
background-color: #FFFFFF;
}
#content h2{
background: #fff;
color: #940D1E;
padding-bottom: 0.3em;
font: normal 150% Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #FF9006;
clear: left;

}
#content h2 p{
margin: 0 auto;
width: 760px;
}


#content a:link, #content a:visited {
font-size: 95%;
font-weight: normal;
color: #41545F;
background-color: #fff;
text-decoration: underline;
}
#content a:hover {
color: #fff;
background-color: #41545F;
text-decoration: none;
}
#footer{
margin: 0 auto;
width: 740px;
background: #41545F;
text-align: center;
color: #fff;
border: 1px solid #000;
border-top: 1px;
border-bottom: 1px;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
padding: 0.8em 0.8em;
}
#footer a:link, #footer a:visited {
color: #fff;
background-color: #41545F;
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
color: #41545F;
background-color: #fff;
}


Credo che in qualche modo debba riuscire ad ampliare in verticale il div content...ma come? Come posso risolvere?

Grazie
Andrea