Clearing drifts? Or another thing?
I'm working with this internet site for my papa : http://smartcampusdeals.com/TendonAiD/index3.html
and also the 3 columns (with the stick cartoony individuals) expand past the container. Now, I have actually the container evaluated a fixed elevation (700px or something) yet I desire the elevation to readjust, so I do not need to transform it for every single various other web page. Why are these 3 columns acting in this way and also what can I do to repair it?
This is the timeless 'fell down moms and dad' trouble, developed by drifting a component, yet not its moms and dad. In your instance you have a float on #feature-text and also its youngsters, yet not #content-wrapper.
There are 4 CSS remedies, although among the major 2 need to benefit you :
Either add an additional clear float - <div class="clear"></div> - at the end of the web content wrapper, or offer the web content wrapper the css overflow:hidden.
This excellent write-up clarifies the concept and also the various other 2 feasible remedies :
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
I've made use of numerous various strategies for this trouble in the past.
The most effective one until now is :
#logos { zoom: 1; overflow: hidden; }
Basically simply establishing the container of the drifts to overflow: hidden or auto solutions this actions in the majority of internet browsers.
Certainly this does not constantly operate in IE (what else is new). That is what the zoom: 1; is for.
Related questions