clear-both-overflow-hidden-css

You may also like: Essential HTML Cheat Sheet

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}
Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358