How do you keep parents of floated elements from collapsing

Question

Although elements like  lt div gt s normally grow to fit their contents  using the float property can cause a startling problem for CSS newbies  If floated elements have non-floated parent elements  the parent will collapse  For example   x000D   x000D   lt div gt     lt div style  float  left   gt Div 1 lt  div gt     lt div style  float  left   gt Div 2 lt  div gt   lt  div gt  x000D   x000D   x000D   The parent div in this example will not expand to contain its floated children - it will appear to have height  0  How do you solve this problem  I would like to create an exhaustive list of solutions here  If you re aware of cross-browser compatibility issues  please point them out  Solution 1 Float the parent   x000D   x000D   lt div style  float  left   gt     lt div style  float  left   gt Div 1 lt  div gt     lt div style  float  left   gt Div 2 lt  div gt   lt  div gt  x000D   x000D   x000D   Pros  Semantic code  Cons  You may not always want the parent floated  Even if you do  do you float the parents  parent  and so on  Must you float every ancestor element  Solution 2 Give the parent an explicit height   x000D   x000D   lt div style  height  300px   gt     lt div style  float  left   gt Div 1 lt  div gt     lt div style  float  left   gt Div 2 lt  div gt   lt  div gt  x000D   x000D   x000D   Pros  Semantic code  Cons  Not flexible - if the content changes or the browser is resized  the layout will break  Solution 3 Append a  quot spacer quot  element inside the parent element  like this   x000D   x000D   lt div gt     lt div style  float  left   gt Div 1 lt  div gt     lt div style  float  left   gt Div 2 lt  div gt     lt div class  spacer  style  clear  both   gt  lt  div gt   lt  div gt  x000D   x000D   x000D   Pros  Straightforward to code  Cons  Not semantic  the spacer div exists only as a layout hack  Solution 4 Set parent to overflow  auto   x000D   x000D   lt div style  overflow  auto   gt     lt div style  float  left   gt Div 1 lt  div gt     lt div style  float  left   gt Div 2 lt  div gt   lt  div gt  x000D   x000D   x000D   Pros  Doesn t require extra div  Cons  Seems like a hack - that s not the overflow property s stated purpose  Comments  Other suggestions

User · Answer

Another possible solution which I think is more semantically correct is to change the floated inner elements to be 'display: inline'. This example and what I was working on when I came across this page both use floated divs in much exactly the same way that a span would be used. Instead of using divs, switch to span, or if you are using another element which is by default 'display: block' instead of 'display: inline' then change it to be 'display: inline'. I believe this is the 100% semantically correct solution.

Solution 1, floating the parent, is essentially to change the entire document to be floated.

Solution 2, setting an explicit height, is like drawing a box and saying I want to put a picture here, i.e. use this if you are doing an img tag.

Solution 3, adding a spacer to clear float, is like adding an extra line below your content and will mess with surrounding elements too. If you use this approach you probably want to set the div to be height: 0px.

Solution 4, overflow: auto, is acknowledging that you don't know how to lay out the document and you are admitting that you don't know what to do.

User · Answer

I believe that best way is to set clear both to the upcoming element   Here s why   1   after selector is not supported in IE6 7 and buggy in FF3  however      nbsp  nbsp  nbsp  nbsp  nbsp if you care only about IE8  and FF3 5  clearing with  after is probably best for you     2  overflow is supposed to do something else so this hack isn t reliable enough    Note to author  there is nothing hacky on clearing    Clearing means to skip the floating fields  CLEAR is with us since HTML3  who knows  maybe even longer  http   www w3 org MarkUp html3 deflists html   maybe they should chose a bit different name like page  new  but thats just a detail

User · Answer

The main problem you may find with changing overflow to auto or hidden is that everything can become scrollable with the middle mouse buttom and a user can mess up the entire site layout

User · Answer

Solution 1   The most reliable and unobtrusive method appears to be this   Demo  http   jsfiddle net SO AMK wXaEH   HTML     lt div class  clearfix  gt       lt div style  float  left   gt Div 1 lt  div gt       lt div style  float  left   gt Div 2 lt  div gt   lt  div gt     CSS     clearfix  after       content          display  block      height  0      clear  both       With a little CSS targeting  you don t even need to add a class to the parent DIV   This solution is backward compatible with IE8 so you don t need to worry about older browsers failing   Solution 2   An adaptation of solution 1 has been suggested and is as follows   Demo  http   jsfiddle net wXaEH 162   HTML     lt div class  clearfix  gt       lt div style  float  left   gt Div 1 lt  div gt       lt div style  float  left   gt Div 2 lt  div gt   lt  div gt     CSS     clearfix  after       content          display  block      height  0      clear  both      zoom  expression  this runtimeStyle  zoom      1   this innerHTML      lt div class  ie7-clear  gt  lt  div gt          ie7-clear       display  block      clear  both      This solution appears to be backward compatible to IE5 5 but is untested   Solution 3   It s also possible to set display  inline-block  and width  100   to emulate a normal block element while not collapsing   Demo  http   jsfiddle net SO AMK ae5ey   CSS     clearfix       display  inline-block      width  100       This solution should be backward compatible with IE5 5 but has only been tested in IE6

User · Answer

One of the most well known solutions is a variation of your solution number 3 that uses a pseudo element instead of a non-semantic html element   It goes something like this      cf after       content           display  block      visibility  hidden      height  0      clear  both      You place that in your stylesheet  and all you need is to add the class  cf  to the element containing the floats    What I use is another variation which comes from Nicolas Gallagher   It does the same thing  but it s shorter  looks neater  and maybe used to accomplish another thing that s pretty useful - preventing the child elements  margins from collapsing with it s parents   but for that you do need something else - read more about it here http   nicolasgallagher com micro-clearfix-hack       cf after       content           display  table      clear  float

User · Answer

Although the code isn t perfectly semantic  I think it s more straightforward to have what I call a  clearing div  at the bottom of every container with floats in it   In fact  I ve included the following style rule in my reset block for every project    clear       clear  both      If you re styling for IE6  god help you   you might want to give this rule a 0px line-height and height as well

User · Answer

My favourite method is using a clearfix class for parent element   clearfix after       content           display  block      height  0      clear  both      visibility  hidden      clearfix       display  inline-block       html  clearfix       height  1       clearfix       display  block

User · Answer

add this in the parent div at the bottom    lt div style  clear both  gt  lt  div gt

User · Answer

My favourite method is using a clearfix class for parent element   clearfix after       content           display  block      height  0      clear  both      visibility  hidden      clearfix       display  inline-block       html  clearfix       height  1       clearfix       display  block

User · Answer

Strange no one has come up with a complete answer for this yet  ah well here it is  Solution one  clear  both Adding a block element with the style clear both  onto it will clear the floats past that point and stop the parent of that element from collapsing  http   jsfiddle net TVD2X 1  Pros  Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css  Cons  Requires the another tag to clear the floats  bloating markup  Note  To fall back to IE6 and for it to work on abstinent parents  i e  the input element  you are not able to use  after  Solution two  display  table Adding display table  to the parent to make it shrug off the floats and display with the correct height  http   jsfiddle net h9GAZ 1  Pros  No extra markup and is a lot neater  Works in IE6  Cons  Requires invalid css to make sure everything plays nice in IE6 and 7  Note  The IE6 and 7 width auto is used to prevent the width being 100  padding  which is not the case in newer browsers  A note on the other  quot solutions quot  These fixes work back to the lowest supported browser  over 1  usage globally  IE6   which means using  after does not cut it  Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question  Using an inline block can have buggy results  children having strange margins and so on  table is much better  Setting the height does  quot prevent quot  the collapse but it is not a proper fix  Invalid css Invalid css never hurt anyone  in fact  it is now the norm  Using browser prefixes is just as invalid as using browser specific hacks and doesn t impact the end user what so ever  In conclusion I use both of the above solutions to make elements react correctly and play nicely with each other  I implore you to do the same

User · Answer

Solution 1   The most reliable and unobtrusive method appears to be this   Demo  http   jsfiddle net SO AMK wXaEH   HTML     lt div class  clearfix  gt       lt div style  float  left   gt Div 1 lt  div gt       lt div style  float  left   gt Div 2 lt  div gt   lt  div gt     CSS     clearfix  after       content          display  block      height  0      clear  both       With a little CSS targeting  you don t even need to add a class to the parent DIV   This solution is backward compatible with IE8 so you don t need to worry about older browsers failing   Solution 2   An adaptation of solution 1 has been suggested and is as follows   Demo  http   jsfiddle net wXaEH 162   HTML     lt div class  clearfix  gt       lt div style  float  left   gt Div 1 lt  div gt       lt div style  float  left   gt Div 2 lt  div gt   lt  div gt     CSS     clearfix  after       content          display  block      height  0      clear  both      zoom  expression  this runtimeStyle  zoom      1   this innerHTML      lt div class  ie7-clear  gt  lt  div gt          ie7-clear       display  block      clear  both      This solution appears to be backward compatible to IE5 5 but is untested   Solution 3   It s also possible to set display  inline-block  and width  100   to emulate a normal block element while not collapsing   Demo  http   jsfiddle net SO AMK ae5ey   CSS     clearfix       display  inline-block      width  100       This solution should be backward compatible with IE5 5 but has only been tested in IE6

User · Answer

I believe that best way is to set clear both to the upcoming element   Here s why   1   after selector is not supported in IE6 7 and buggy in FF3  however      nbsp  nbsp  nbsp  nbsp  nbsp if you care only about IE8  and FF3 5  clearing with  after is probably best for you     2  overflow is supposed to do something else so this hack isn t reliable enough    Note to author  there is nothing hacky on clearing    Clearing means to skip the floating fields  CLEAR is with us since HTML3  who knows  maybe even longer  http   www w3 org MarkUp html3 deflists html   maybe they should chose a bit different name like page  new  but thats just a detail

User · Answer

The problem happens when a floated element is within a container box  that element does not automatically force the container   s height adjust to the floated element  When an element is floated  its parent no longer contains it because the float is removed from the flow  You can use 2 methods to fix it      clear  both    clearfix   Once you understand what is happening  use the method below to    clearfix    it    clearfix after       content           display  block      clear  both      visibility  hidden      line-height  0      height  0      clearfix       display  inline-block     html xmlns   clearfix       display  block       html  clearfix       height  1       Demonstration

User · Answer

I use 2 and 4 where applicable  i e  when I know the content s height or if overflowing doesn t harm   Anywhere else  I go with solution 3  By the way  your first solution has no advantage over 3  that I can spot  because it isn t any more semantic since it uses the same dummy element   By the way  I wouldn t be concerned about the fourth solution being a hack  Hacks in CSS would only be harmful if their underlying behaviour is subject to reinterpretation or other change  This way  your hack wouldn t be guaranteed to work  However in this case  your hack relies on the exact behaviour that overflow  auto is meant to have  No harm in hitching a free ride

User · Answer

Although the code isn t perfectly semantic  I think it s more straightforward to have what I call a  clearing div  at the bottom of every container with floats in it   In fact  I ve included the following style rule in my reset block for every project    clear       clear  both      If you re styling for IE6  god help you   you might want to give this rule a 0px line-height and height as well

User · Answer

I usually use the overflow  auto trick  although that s not  strictly speaking  the intended use for overflow  it is kinda related - enough to make it easy to remember  certainly  The meaning of float  left itself has been extended for various uses more significantly than overflow is in this example  IMO

User · Answer

I use 2 and 4 where applicable  i e  when I know the content s height or if overflowing doesn t harm   Anywhere else  I go with solution 3  By the way  your first solution has no advantage over 3  that I can spot  because it isn t any more semantic since it uses the same dummy element   By the way  I wouldn t be concerned about the fourth solution being a hack  Hacks in CSS would only be harmful if their underlying behaviour is subject to reinterpretation or other change  This way  your hack wouldn t be guaranteed to work  However in this case  your hack relies on the exact behaviour that overflow  auto is meant to have  No harm in hitching a free ride

User · Answer

Although the code isn t perfectly semantic  I think it s more straightforward to have what I call a  clearing div  at the bottom of every container with floats in it   In fact  I ve included the following style rule in my reset block for every project    clear       clear  both      If you re styling for IE6  god help you   you might want to give this rule a 0px line-height and height as well

User · Answer

I usually use the overflow  auto trick  although that s not  strictly speaking  the intended use for overflow  it is kinda related - enough to make it easy to remember  certainly  The meaning of float  left itself has been extended for various uses more significantly than overflow is in this example  IMO

User · Answer

Rather than putting overflow auto on the parent  put overflow hidden  The first CSS I write for any webpage is always   div     overflow hidden      Then I never have to worry about it

User · Answer

I use 2 and 4 where applicable  i e  when I know the content s height or if overflowing doesn t harm   Anywhere else  I go with solution 3  By the way  your first solution has no advantage over 3  that I can spot  because it isn t any more semantic since it uses the same dummy element   By the way  I wouldn t be concerned about the fourth solution being a hack  Hacks in CSS would only be harmful if their underlying behaviour is subject to reinterpretation or other change  This way  your hack wouldn t be guaranteed to work  However in this case  your hack relies on the exact behaviour that overflow  auto is meant to have  No harm in hitching a free ride

User · Answer

One of the most well known solutions is a variation of your solution number 3 that uses a pseudo element instead of a non-semantic html element   It goes something like this      cf after       content           display  block      visibility  hidden      height  0      clear  both      You place that in your stylesheet  and all you need is to add the class  cf  to the element containing the floats    What I use is another variation which comes from Nicolas Gallagher   It does the same thing  but it s shorter  looks neater  and maybe used to accomplish another thing that s pretty useful - preventing the child elements  margins from collapsing with it s parents   but for that you do need something else - read more about it here http   nicolasgallagher com micro-clearfix-hack       cf after       content           display  table      clear  float

User · Answer

I usually use the overflow  auto trick  although that s not  strictly speaking  the intended use for overflow  it is kinda related - enough to make it easy to remember  certainly  The meaning of float  left itself has been extended for various uses more significantly than overflow is in this example  IMO

User · Answer

The main problem you may find with changing overflow to auto or hidden is that everything can become scrollable with the middle mouse buttom and a user can mess up the entire site layout

User · Answer

The problem happens when a floated element is within a container box  that element does not automatically force the container   s height adjust to the floated element  When an element is floated  its parent no longer contains it because the float is removed from the flow  You can use 2 methods to fix it      clear  both    clearfix   Once you understand what is happening  use the method below to    clearfix    it    clearfix after       content           display  block      clear  both      visibility  hidden      line-height  0      height  0      clearfix       display  inline-block     html xmlns   clearfix       display  block       html  clearfix       height  1       Demonstration

User · Answer

The ideal solution would be to use inline-block for the columns instead of floating  I think the browser support is pretty good if you follow  a  apply inline-block only to elements that are normally inline  eg span   and  b  add -moz-inline-box for Firefox   Check your page in FF2 as well because I had a ton of problems when nesting certain elements  surprisingly  this is the one case where IE performs much better than FF

User · Answer

I usually use the overflow  auto trick  although that s not  strictly speaking  the intended use for overflow  it is kinda related - enough to make it easy to remember  certainly  The meaning of float  left itself has been extended for various uses more significantly than overflow is in this example  IMO

User · Answer

Rather than putting overflow auto on the parent  put overflow hidden  The first CSS I write for any webpage is always   div     overflow hidden      Then I never have to worry about it

User · Answer

There are several versions of the clearfix  with Nicolas Gallagher and Thierry Koblentz as key authors   If you want support for older browsers  it s best to use this clearfix     clearfix before   clearfix after       content          display  table      clearfix after       clear  both      clearfix        zoom  1      In SCSS  you should use the following technique     clearfix      amp  before   amp  after       content          display table          amp  after       clear both          amp         zoom 1          clearfixedelement        extend  clearfix      If you don t care about support for older browsers  there s a shorter version     clearfix after       content         display table      clear both

User · Answer

Strange no one has come up with a complete answer for this yet  ah well here it is  Solution one  clear  both Adding a block element with the style clear both  onto it will clear the floats past that point and stop the parent of that element from collapsing  http   jsfiddle net TVD2X 1  Pros  Allows you to clear an element and elements you add below will not be effected by the floated elements above and valid css  Cons  Requires the another tag to clear the floats  bloating markup  Note  To fall back to IE6 and for it to work on abstinent parents  i e  the input element  you are not able to use  after  Solution two  display  table Adding display table  to the parent to make it shrug off the floats and display with the correct height  http   jsfiddle net h9GAZ 1  Pros  No extra markup and is a lot neater  Works in IE6  Cons  Requires invalid css to make sure everything plays nice in IE6 and 7  Note  The IE6 and 7 width auto is used to prevent the width being 100  padding  which is not the case in newer browsers  A note on the other  quot solutions quot  These fixes work back to the lowest supported browser  over 1  usage globally  IE6   which means using  after does not cut it  Overflow hidden does show the content but does not prevent the element from collapsing and so does not answer the question  Using an inline block can have buggy results  children having strange margins and so on  table is much better  Setting the height does  quot prevent quot  the collapse but it is not a proper fix  Invalid css Invalid css never hurt anyone  in fact  it is now the norm  Using browser prefixes is just as invalid as using browser specific hacks and doesn t impact the end user what so ever  In conclusion I use both of the above solutions to make elements react correctly and play nicely with each other  I implore you to do the same

User · Answer

add this in the parent div at the bottom    lt div style  clear both  gt  lt  div gt

User · Answer

I use 2 and 4 where applicable  i e  when I know the content s height or if overflowing doesn t harm   Anywhere else  I go with solution 3  By the way  your first solution has no advantage over 3  that I can spot  because it isn t any more semantic since it uses the same dummy element   By the way  I wouldn t be concerned about the fourth solution being a hack  Hacks in CSS would only be harmful if their underlying behaviour is subject to reinterpretation or other change  This way  your hack wouldn t be guaranteed to work  However in this case  your hack relies on the exact behaviour that overflow  auto is meant to have  No harm in hitching a free ride

User · Answer

Although the code isn t perfectly semantic  I think it s more straightforward to have what I call a  clearing div  at the bottom of every container with floats in it   In fact  I ve included the following style rule in my reset block for every project    clear       clear  both      If you re styling for IE6  god help you   you might want to give this rule a 0px line-height and height as well

User · Answer

There are several versions of the clearfix  with Nicolas Gallagher and Thierry Koblentz as key authors   If you want support for older browsers  it s best to use this clearfix     clearfix before   clearfix after       content          display  table      clearfix after       clear  both      clearfix        zoom  1      In SCSS  you should use the following technique     clearfix      amp  before   amp  after       content          display table          amp  after       clear both          amp         zoom 1          clearfixedelement        extend  clearfix      If you don t care about support for older browsers  there s a shorter version     clearfix after       content         display table      clear both

User · Answer

The ideal solution would be to use inline-block for the columns instead of floating  I think the browser support is pretty good if you follow  a  apply inline-block only to elements that are normally inline  eg span   and  b  add -moz-inline-box for Firefox   Check your page in FF2 as well because I had a ton of problems when nesting certain elements  surprisingly  this is the one case where IE performs much better than FF

User · Answer

Another possible solution which I think is more semantically correct is to change the floated inner elements to be 'display: inline'. This example and what I was working on when I came across this page both use floated divs in much exactly the same way that a span would be used. Instead of using divs, switch to span, or if you are using another element which is by default 'display: block' instead of 'display: inline' then change it to be 'display: inline'. I believe this is the 100% semantically correct solution.

Solution 1, floating the parent, is essentially to change the entire document to be floated.

Solution 2, setting an explicit height, is like drawing a box and saying I want to put a picture here, i.e. use this if you are doing an img tag.

Solution 3, adding a spacer to clear float, is like adding an extra line below your content and will mess with surrounding elements too. If you use this approach you probably want to set the div to be height: 0px.

Solution 4, overflow: auto, is acknowledging that you don't know how to lay out the document and you are admitting that you don't know what to do.

[html] How do you keep parents of floated elements from collapsing?

Examples related to html

Examples related to css

Examples related to layout

Examples related to css-float

Examples related to clearfix