Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Have you tried to use the clearfix solution to collapsing divs? There are variations on this and there is a newer version but I don't have the url to hand, but this is standard clearfix css which you add to the parent element that is collapsing and causing issues with floated elements <a href="http://www.webtoolkit.info/css-clearfix.html" rel="nofollow">http://www.webtoolkit.info/css-clearfix.html</a>. Chris Coyer has a better version here <a href="http://css-tricks.com/snippets/css/clear-fix/" rel="nofollow">http://css-tricks.com/snippets/css/clear-fix/</a>.</p> <p>You say "I understand that sometimes the floated element doesn't account for its parents height and therefore sometimes fails to contain it properly" this is kind of true, the parent will collapse if all child elements are floated. This is due to the elements being removed from the normal flow, when this occurs the parent div is unable to calculate its height and collapses as if there isn't anything inside of the div.</p> <p>But without seeing the page and the issue you are having I can only estimate that the issue is due to IE6-IE7's haslayout property which is really annoying, they sorted it out from version 8 upwards but it does add extra development time to your build.</p> <p>But in most situations the clearfix solution is best as it doesn't add extra markup to the page such as </p> <pre><code>&lt;div style="clear: both"&gt;&lt;/div&gt; </code></pre> <p>this is old and out of date and should be avoided.</p> <p>I hope this helps you, if you need any more information or I have not answered the question just ask.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload