Using clear:both to make div full height of content?

Question

Do you need to use something like <div style="clear:both">&nbsp;</div> after any floating content to make sure your div goes the full height of your content or is there any easier way of doing this?

Below is the code im currently using

HTML

<div class="socialmedia">
<h2>Stay Connected</h2>
<ul>
<li><img src="images/twitter.png" width="32" height="32" alt="Twitter" /></li>
<li><img src="images/googleplus.png" width="32" height="32" alt="Google Plus" /></li>
<li><img src="images/behance.png" width="32" height="32" alt="Behance" /></li>
<li><img src="images/dribble.png" width="32" height="32" alt="Dribble" /></li>
<li><img src="images/pinterest.png" width="32" height="32" alt="Pintrest" /></li>
<li><img src="images/email.png" width="32" height="32" alt="Email" /></li>
</ul>
<div style="clear:both">&nbsp;</div>
</div><!-- close social media -->

CSS

 .socialmedia {
width:960px;
background-color:#C69;

 }

 .socialmedia ul {
margin:0;
padding:0;
clear:both;
}


 .socialmedia ul li {
float:left;
list-style:none;
margin-right:20px;
 }

Answer 1

You can add overflow:auto to your container DIV.