Using clear: how to make a div the full height of the content?

Question

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

Below is the im code that currently uses

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: auto overflow to your DIV container.

Answer 2

You can give .socialmedia the overflow:hidden style and remove the div div.

Answer 3

Use li { display: inline-block; } li { display: inline-block; } - gives you the flexibility to center your list and does not require any fleet cleaning methods.

See: http://jsfiddle.net/Wexcode/NKzm2/

Note that in the script I added ul { font-size: 0; } ul { font-size: 0; } - This should negate the fact that inline elements cause spaces in the markup to display if their font size is not zero.

Answer 4

Add

 .socialmedia ul:after { content:''; display:block; clear:both; }