Why doesn t the height of a container element increase if it contains floated elements

Question

I would like to ask how height and float work  I have an outer div and an inner div that has content in it  Its height may vary depending on the content of the inner div but it seems that my inner div will overflow its outside div  What would be the proper way to do it    x000D   x000D    lt html gt  x000D       lt body gt  x000D           lt div style  margin 0 auto width  960px  min-height  100px  background-color orange  gt  x000D            lt div style  width 500px  height 200px  background-color black  float right  gt  lt  div gt  x000D           lt  div gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You are encountering the float bug  though I m not sure if it s technically a bug due to how many browsers exhibit this behaviour    Here is what is happening   Under normal circumstances  assuming that no explicit height has been set  a block level element such as a div will set its height based on its content   The bottom of the parent div will extend beyond the last element   Unfortunately  floating an element stops the parent from taking the floated element into account when determining its height   This means that if your last element is floated  it will not  stretch  the parent in the same way a normal element would   Clearing  There are two common ways to fix this   The first is to add a  clearing  element  that is  another element below the floated one that will force the parent to stretch   So add the following html as the last child    lt div style  clear both  gt  lt  div gt    It shouldn t be visible  and by using clear both  you make sure that it won t sit next to the floated element  but after it   Overflow   The second method  which is preferred by most people  I think  is to change the CSS of the parent element so that the overflow is anything but  visible    So setting the overflow to  hidden  will force the parent to stretch beyond the bottom of the floated child   This is only true if you haven t set a height on the parent  of course   Like I said  the second method is preferred as it doesn t require you to go and add semantically meaningless elements to your markup  but there are times when you need the overflow to be visible  in which case adding a clearing element is more than acceptable

User · Answer

Its because of the float of the div  Add overflow  hidden on the outside element    lt div style  overflow hidden  margin 0 auto width  960px  min-height  100px  background-color orange   gt       lt div style  width 500px  height 200px  background-color black  float right  gt       lt  div gt   lt  div gt    Demo

User · Answer

You confuse how browsers renders the elements when there are floating elements  If one block element is floating  your inner div in your case   other block elements will ignore it because browser removes floating elements from the normal flow of the web page  Then  because the floated div has been removed from the normal flow  the outside div is filled in  like the inner div isn t there  However  inline elements  images  links  text  blackquotes  will respect the boundaries of the floating element  If you introduce text in the outside div  the text will place arround de inner div   In other words  block elements  headers  paragraphs  divs  etc  ignore floating elements and fill in  and inline elements  images  links  text  etc  respect boundaries of floating elements   An fiddle example here   lt body gt       lt div style  float right  background-color blue width 200px min-height 400px margin-right 20px  gt             floating element      lt  div gt       lt h1 style  background-color red   gt  this is a big header lt  h1 gt       lt p style  background-color green  gt  this is a parragraph with text and a big image  The text places arrounds the floating element  Because of the image is wider than space between paragrah and floating element places down the floating element  Try to make wider the viewport and see what happens  D          lt img src  http   2 bp blogspot com  nKxzQGcCLtQ TBYPAJ6xM4I AAAAAAAAAC8 lG6XemOXosU s1600 css png  gt        lt  p gt

User · Answer

you can use overflow property to the container div if you don t have any div to show over the container eg    lt div class  cointainer  gt       lt div class  one  gt Content One lt  div gt       lt div class  two  gt Content Two lt  div gt   lt  div gt    Here is the following css    container      width 100     As per your requirment        height auto      float left      overflow hidden     one      width 200px    As per your requirment        height auto      float left      two      width 200px    As per your requirment        height auto      float left      -----------------------OR------------------------------       lt div class  cointainer  gt           lt div class  one  gt Content One lt  div gt           lt div class  two  gt Content Two lt  div gt           lt div class  clearfix  gt  lt  div gt       lt  div gt    Here is the following css        container          width 100     As per your requirment            height auto          float left          overflow hidden             one          width 200px    As per your requirment            height auto          float left              two          width 200px    As per your requirment            height auto          float left             clearfix before       clearfix after          display  table          content                  clearfix after          clear  both

User · Answer

The floated elements do not add to the height of the container element  and hence if you don t clear them  container height won t increase     I ll show you visually         More Explanation    lt div gt     lt div style  float  left   gt  lt  div gt     lt div style  width  15px   gt  lt  div gt   lt  -- This will shift                                          besides the top div  Why  Because of the top div                                          is floated left  making the                                          rest of the space blank -- gt      lt div style  clear  both   gt  lt  div gt      lt  -- Now in order to prevent the next div from floating beside the top ones          we use  clear  both    This is like a wall  so now none of the div s         will be floated after this point  The container height will now also include the         height of these floated divs -- gt     lt div gt  lt  div gt   lt  div gt    You can also add overflow  hidden  on container elements  but I would suggest you use clear  both  instead   Also if you might like to self-clear an element you can use   self clear after     content        clear  both    display  table        How Does CSS Float Work   What is float exactly and what does it do    The float property is misunderstood by most beginners  Well  what exactly does float do  Initially  the float property was introduced to flow text around images  which are floated left or right  Here s another explanation by  Madara Uchicha  So  is it wrong to use the float property for placing boxes side by side  The answer is no  there is no problem if you use the float property in order to set boxes side by side  Floating an inline or block level element will make the element behave like an inline-block element Demo If you float an element left or right  the width of the element will be limited to the content it holds  unless width is defined explicitly     You cannot float an element center  This is the biggest issue I ve always seen with beginners  using float  center   which is not a valid value for the float property  float is generally used to float move content to the very left or to the very right  There are only four valid values for float property i e left  right  none  default  and inherit  Parent element collapses  when it contains floated child elements  in order to prevent this  we use clear  both  property  to clear the floated elements on both the sides  which will prevent the collapsing of the parent element  For more information  you can refer my another answer here   Important  Think of it where we have a stack of various elements  When we use float  left  or float  right  the element moves above the stack by one  Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements   Please don t relate this to z-index as that is completely different       Taking a case as an example to explain how CSS floats work  assuming we need a simple 2 column layout with a header  footer  and 2 columns  so here is what the blueprint looks like       In the above example  we will be floating only the red boxes  either you can float both to the left  or you can float on to left  and another to right as well  depends on the layout  if it s 3 columns  you may float 2 columns to left where another one to the right so depends  though in this example  we have a simplified 2 column layout so will float one to left and the other to the right   Markup and styles for creating the layout explained further down      lt div class  main wrap  gt       lt header gt Header lt  header gt       lt div class  wrapper clear  gt           lt div class  floated left  gt              This lt br   gt              is lt br   gt              just lt br   gt              a lt br   gt              left lt br   gt              floated lt br   gt              column lt br   gt           lt  div gt           lt div class  floated right  gt              This lt br   gt              is lt br   gt              just lt br   gt              a lt br   gt              right lt br   gt              floated lt br   gt              column lt br   gt           lt  div gt       lt  div gt       lt footer gt Footer lt  footer gt   lt  div gt           -moz-box-sizing  border-box           Just for demo purpose        -webkkit-box-sizing  border-box       Just for demo purpose        box-sizing  border-box                Just for demo purpose        margin  0      padding  0      main wrap       margin  20px      border  3px solid black      width  520px     header  footer       height  50px      border  3px solid silver      text-align  center      line-height  50px      wrapper       border  3px solid green      floated left       float  left      width  200px      border  3px solid red      floated right       float  right      width  300px      border  3px solid red      clear after       clear  both      content          display  table      Let s go step by step with the layout and see how float works     First of all  we use the main wrapper element  you can just assume that it s your viewport  then we use header and assign a height of 50px so nothing fancy there  It s just a normal non floated block level element which will take up 100  horizontal space unless it s floated or we assign inline-block to it   The first valid value for float is left so in our example  we use float  left  for  floated left  so we intend to float a block to the left of our container element   Column floated to the left  And yes  if you see  the parent element  which is  wrapper is collapsed  the one you see with a green border didn t expand  but it should right  Will come back to that in a while  for now  we have got a column floated to left   Coming to the second column  lets it float this one to the right  Another column floated to the right  Here  we have a 300px wide column which we float to the right  which will sit beside the first column as it s floated to the left  and since it s floated to the left  it created empty gutter to the right  and since there was ample of space on the right  our right floated element sat perfectly beside the left one   Still  the parent element is collapsed  well  let s fix that now  There are many ways to prevent the parent element from getting collapsed    Add an empty block level element and use clear  both  before the parent element ends  which holds floated elements  now this one is a cheap solution to clear your floating elements which will do the job for you but  I would recommend not to use this    Add   lt div style  clear  both   gt  lt  div gt  before the  wrapper div ends  like   lt div class  wrapper clear  gt       lt  -- Floated columns -- gt       lt div style  clear  both   gt  lt  div gt   lt  div gt    Demo  Well  that fixes very well  no collapsed parent anymore  but it adds unnecessary markup to the DOM  so some suggest  to use overflow  hidden  on the parent element holding floated child elements which work as intended   Use overflow  hidden  on  wrapper   wrapper       border  3px solid green      overflow  hidden      Demo  That saves us an element every time we need to clear float but as I tested various cases with this  it failed in one particular one  which uses box-shadow on the child elements   Demo  Can t see the shadow on all 4 sides  overflow  hidden  causes this issue   So what now  Save an element  no overflow  hidden  so go for a clear fix hack  use the below snippet in your CSS  and just as you use overflow  hidden  for the parent element  call the class below on the parent element to self-clear    clear after       clear  both      content          display  table      lt div class  wrapper clear  gt       lt  -- Floated Elements -- gt   lt  div gt    Demo  Here  shadow works as intended  also  it self-clears the parent element which prevents to collapse   And lastly  we use footer after we clear the floated elements   Demo    When is float  none  used anyways  as it is the default  so any use to declare float  none    Well  it depends  if you are going for a responsive design  you will use this value a lot of times  when you want your floated elements to render one below another at a certain resolution  For that float  none  property plays an important role there     Few real-world examples of how float is useful    The first example we already saw is to create one or more than one column layouts  Using img floated inside p which will enable our content to flow around    Demo  Without floating img   Demo 2  img floated to the left    Using float for creating horizontal menu - Demo     Float second element as well  or use  margin   Last but not the least  I want to explain this particular case where you float only single element to the left but you do not float the other  so what happens   Suppose if we remove float  right  from our  floated right class  the div will be rendered from extreme left as it isn t floated   Demo  So in this case  either you can float the to the left as well   OR   You can use margin-left which will be equal to the size of the left floated column i e 200px wide

User · Answer

Try this one   parent div      display  flex

User · Answer

You need to add overflow auto to your parent div for it to encompass the inner floated div    lt div style  margin 0 auto width  960px  min-height  100px  background-color orange overflow auto  gt       lt div style  width 500px  height 200px  background-color black  float right  gt       lt  div gt   lt  div gt    jsFiddle example

[html] Why doesn't the height of a container element increase if it contains floated elements?

Examples related to html

Examples related to css

Examples related to css-float