Make outer div be automatically the same height as its floating content

Question

I want the outer div  which is black to wrap its divs floating within it  I dont want to use style  height  200px in the div with the outerdiv id as I want it to be automatically the height of its content  eg  the floating divs     lt div id  outerdiv  style  border  1px solid black background-color  black   gt   lt div style  width 300px border  red 1px dashed float  left   gt       lt p gt xxxxxxxxxxxxxxxxxxxxxxxxxxxxx lt  p gt   lt  div gt    lt div style  width 300px border  red 1px dashed float  right   gt       lt p gt zzzzzzzzzzzzzzzzzzzzzzzzzzzzz lt  p gt   lt  div gt      How to achieve this

User · Answer

You may want to try self-closing floats  as detailed on http   www sitepoint com simple-clearing-of-floats   So perhaps try either overflow  auto  usually works   or overflow  hidden  as alex said

User · Answer

Use jQuery   Set Parent Height   Child offsetHeight     document  ready function           parent  css  height     child  attr  offsetHeight

User · Answer

First of all you don t use width 300px that s an attribute setting for the tag not CSS  use width  300px  instead   I would suggest applying the clearfix technique on the  outerdiv  Clearfix is a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs    lt div id  outerdiv  class  clearfix  style  width 600px  background-color  black   gt       lt div style  width 300px  float  left   gt           lt p gt xxxxxxxxxxxxxxxxxxxxxxxxxxxxx lt  p gt       lt  div gt        lt div style  width 300px  float  left   gt           lt p gt zzzzzzzzzzzzzzzzzzzzzzzzzzzzz lt  p gt       lt  div gt   lt  div gt    Here is an example of your situation and what Clearfix does to resolve it

User · Answer

Firstly  I highly recommend you do your CSS styling in an external CSS file  rather than doing it inline  It s much easier to maintain and can be more reusable using classes   Working off Alex s answer   amp  Garret s clearfix  of  adding an element at the end with clear  both   you can do it like so        lt div id  outerdiv  style  border  1px solid black  background-color  black   gt           lt div style  width  300px  border  red 1px dashed  float  left   gt               lt p gt xxxxxxxxxxxxxxxxxxxxxxxxxxxxx lt  p gt           lt  div gt            lt div style  width  300px  border  red 1px dashed  float  right   gt               lt p gt zzzzzzzzzzzzzzzzzzzzzzzzzzzzz lt  p gt           lt  div gt           lt div style  clear both   gt  lt  div gt       lt  div gt    This works  but as you can see inline CSS isn t so pretty

User · Answer

You can set the outerdiv s CSS to this   outerdiv       overflow  hidden     make sure this doesn t cause unexpected behaviour        You can also do this by adding an element at the end with clear  both  This can be added normally  with JS  not a good solution  or with  after CSS pseudo element  not widely supported in older IEs     The problem is that containers won t naturally expand to include floated children  Be warned with using the first example  if you have any children elements outside the parent element  they will be hidden  You can also use  auto  as the property value  but this will invoke scrollbars if any element appears outside   You can also try floating the parent container  but depending on your design  this may be impossible difficult

User · Answer

Use clear  both   I spent over a week trying to figure this out

User · Answer

I know some people will hate me  but I ve found display table-cell to help in this cases   It is really cleaner

[css] Make outer div be automatically the same height as its floating content

Examples related to css

Examples related to html

Examples related to css-float