Alternative to overflow:hidden for wrapping divs – clear:both

When designing a website there will often be instances where you need a div to have a dynamic height rather than fixed. If there are floated divs within the wrapping div it can cause some layout issues, in which case overflow:hidden can be added to the css. But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc). The solution is quite simple, although it does require more mark-up to be added to the HTML. The solution is to add a div with the css clear:both applied to it, see the example below:

<div class="wrapper">
	<div class="left">This div is floated left</div>
	<div class="right">This div is floated right</div>
	<div class="clear"></div>
</div>

And the CSS:

.clear{clear:both}

Related Posts from Tutorials, Website Management

Free CDN To Cope With High Demand – CoralCDN

EU Cookie Law Message with jQuery

WordPress: Display Permalinks in Posts Using Shortcode

How to Retweet Manually [Tutorial]