Container DIV height not adapting to content - html

Question

do you know why the text in my .block-left DIV goes outside the container .block? I would expect .block (which has no fixed height) to adapt its height based on what's in .block-left and .block-right. http://jsfiddle.net/9dUC9/ Thanks
.block {
padding: 20px;
text-align: justify;
background-clip: border-box;
box-sizing: border-box;
border: 1px solid #000;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-left {
float: left;
box-sizing: border-box;
overflow: hidden;
width: 50%;
}
.block-right {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 50%;
}
<div class="block">
<div class="block-left">CENTRE DE kkjljljlj
<p>3, rue der</p>
<p>51 lmlm (klklkl)</p>
<ul id="contact">
<li>+3 691 123.456</li>
<li><a href="javascript:sendAnnotatedMailTo('contact','lmlml','lu','Contact via mlmlm.lu','')">contact#blolklkl.la>
</li>
<li> Plan d'accès
</li>
</ul>
</div>
<!-- End DIV block-left -->
<div class="block-right">hgh</div>
<!-- End DIV block-right -->
</div>

Answer 1

Try adding overflow: auto; to .block. FIDDLE
.block {
padding: 20px;
text-align: justify;
background-clip: border-box;
box-sizing: border-box;
border: 1px solid #000;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
overflow: auto; /* here */
}

Answer 2

Use clearfix
Is this what you want
http://jsfiddle.net/cancerian73/9dUC9/1/
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Or, if you don't require IE<8 support, the following is fine too:
.clearfix:after {
content: "";
display: table;
clear: both;}