CSS automatisch mee groeien en border laten werken onderaan

Ik ben bezig met een website maar ik krijg het niet voor elkaar om de border onderaan te laten zien. Ik gebruik op dit moment min-height bij alle kolommen in het midden en bij alle kolommen in het midden padding-bottom: 32767px; margin-bottom: -32747px; zodat die niet onnodig lang wordt.

Maar zoals je kan zien op deze voorbeeld website is de onderkant van de div nu niet met een border. Op welke manier kan ik het voor elkaar krijgen dat de border aansluit en dat de pagina lang genoeg is voor de tekst die er in zit (en dat dus alle kolommen mee groeien).

Ik heb nu de volgende codes gebruikt:


Mijn CSS:

#container {
text-align : left;
margin : 0 auto;
width : 1150px;
height: 100%;
margin-left:auto;
margin-right:auto;
padding-top:0;
background : #ffffff;
overflow: hidden;
}

#banner {
clear:both;
margin-left:20px;
position:relative;
overflow: hidden;
border: 1px solid black;
width: 1110px;
height: 200px;
margin-bottom: 14px;
}

#left {
background-color: #fff;
float:left;
height:200px;
position:relative;
width:210px;
}

#middle {
float:left;
background-color: #fff;
height:200px;
position:relative;
width:680px;
}

#right {
float:right;
width: 220px;
background-color: #fff;
height:200px;
}

#midden {
clear:both;
margin-right:0;
position:relative;
overflow: hidden;
}

#links {
border: 1px solid black;
background-color: #ffff;
float:left;
min-height:800px;
position:relative;
width:200px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 32767px;
margin-bottom: -32747px;
margin-left: 20px;
margin-right: 14px;
}

#inhoud {
border:1px solid black;
float:left;
background-color: #ffff;
min-height:800px;
position:relative;
width:638px;
padding-bottom: 32767px;
padding-left: 10px;
margin-bottom: -32747px;
}

#rechts {
float:right;
width: 220px;
margin-left: 14px;
margin-right: 18px;
background-color: #fff;
border: 1px solid black;
min-height:800px;
padding-bottom: 32767px;
margin-bottom: -32747px;
}

#footer {
background-color: #fff;
clear:both;
color:#000000;
font-size:12px;
margin-top: 20px;
height:100px;
width: 1110px;
position:relative;
text-align:center;
margin-left: 20px;
border: solid black;
border-width: 1px;
}

en de indeling:

<div id="container">

<div id="banner">

<div id="left">

</div>

<div id="middle">

</div>

<div id="right">

</div>

</div>

<div id="midden">

<div id="links">

<?php include "menu.php"; ?>

</div>

<div id="rechts">

<?php include "menurechts.php"; ?>

</div>

<div id="inhoud">
</div>

</div>

<div id="footer">
</div>

</div>

Als er iets nog niet duidelijk is vraag het dan,

Alvast bedankt,
Matthijs