css div height auto not wrapping properly - css

Question

I have a wrapper called #sub-menu and which is displayed in yellow in the here below cssdesk file. I set its height at auto but unfortunately it is not wrapping all its content properly. This issue is driving me crazy. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/AVpjR

Answer 1

Add overflow:auto; to your #sub-menu
See: http://cssdesk.com/qBUdf

Answer 2

The floating elements are what disrupts the height. You need to add a new div that will clear all floating elements for the height of the parent container to fill the full length.
HTML:
<div id="sub-menu">
<div id="form-loc">
<a id="appliquer-loc" class="button white">filtrer</a>
<div id="saisi-loc">
<input id="input-loc" type="text"/>
<a id="valider-loc" class="button white">valider</a>
<a id="supprimer-loc" class="button white">supprimer</a>
<span id="msg-loc">Valeur saisie incorrecte</span>
</div>
</div>
<div id="proposition-loc">
<a id="proposer-loc" class="button white">+ Proposer une sortie</a>
</div>
<div class="clear"></div>
</div>
CSS:
#sub-menu{
width:960px;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:yellow;
}
#form-loc{
width:800px;
height:auto;
float:left;
position:relative;
background-color:rgba(1,1,1,0.2);}
#saisi-loc{
background-color:rgba(123,123,123,0.2);
width:auto;}
#input-loc{
width:300px;
height:25px;
border:1px solid gray;}
#msg-loc{
font-size:14px;
padding:0 10px;
font-weight:bold;
background-color:pink;}
#proposition-loc{
text-align:right;}
.clear {
clear: both;
}