CSS container div not getting height

Question

I want my container div to get the height of max of its children s height  without knowing what height the child divs are going to have  I was trying out on JSFiddle  The container div is on red  which is not showing up  Why

User · Answer

Try inserting this clearing div before the last  lt  div gt    lt div style  clear  both  line-height  0   gt  amp nbsp  lt  div gt

User · Answer

You are floating the children which means they  float  in front of the container  In order to take the correct height  you must  clear  the float  The div style  clear  both  clears the floating an gives the correct height to the container  see http   css maxdesign com au floatutorial clear htm for more info on floats   eg    lt div class  c  gt       lt div class  l  gt        lt  div gt       lt div class  m  gt          World      lt  div gt       lt div style  clear  both    gt   lt  div gt

User · Answer

The best and the most bulletproof solution is to add   before and   after pseudoelements to the container  So if you have for example a list like    lt ul class  clearfix  gt       lt li gt  lt  li gt       lt li gt  lt  li gt       lt li gt  lt  li gt   lt  ul gt    And every elements in the list has float left property  then you should add to your css    clearfix  after   clearfix  before        content           clear  both       display  table      Or you could try display inline-block  property  then you don t need to add any clearfix

User · Answer

Add the following property   c              overflow  hidden     This will force the container to respect the height of all elements within it  regardless of floating elements  http   jsfiddle net gtdfY 3  UPDATE Recently  I was working on a project that required this trick  but needed to allow overflow to show  so instead  you can use a pseudo-element to clear your floats  effectively achieving the same effect while allowing overflow on all elements   c after      clear  both      content   quot  quot       display  block     http   jsfiddle net gtdfY 368

User · Answer

It is not that easier    c       overflow  auto

User · Answer

I ran into this same issue  and I have come up with four total viable solutions   Make the container display  flex   this is my favorite solution  Add overflow  auto  or overflow  hidden  to the container Add the following CSS for the container    c after       clear  both      content   quot  quot       display  block      Make the following the last item inside the container    lt div style  quot clear  both  quot  gt  lt  div gt

[css] CSS container div not getting height

Examples related to css

Examples related to css-float

Examples related to liquid-layout