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: