how to make a div to wrap two float divs inside

Question

I don t know if it s a common problem  but I can t find the solution in web so far  I would like to have two divs wrapped inside another div  however these two divs inside have to be align the same level  for example  left one takes 20 width of the wrappedDiv  right one take another 80    To achieve this purpose  I used the following example CSS  However  now the wrap DIV didn t wrap those divs all  The wrap Div has a small height than those two divs contained inside  How could I make sure that the wrap Div has the largest height as the contained divs  Thanks      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN           http   www w3 org TR html4 loose dtd  gt   lt html lang  en  gt   lt head gt       lt meta http-equiv  content-type  content  text html  charset iso-8859-1  gt       lt title gt liquid test lt  title gt       lt style type  text css  media  screen  gt          body                       margin  0              padding  0              height 100                      nav                       float  left              width  25               height  150px              background-color   999              margin-bottom  10px                      content                       float  left              margin-left  1               width  65               height  150px              background-color   999              margin-bottom  10px                            wrap                     background-color  DDD            height 100               lt  style gt   lt  head gt   lt body gt   lt div id  wrap  gt       lt h1 gt wrap1  lt  h1 gt       lt div id  nav  gt  lt  div gt       lt div id  content  gt  lt a href  index htm  gt  amp lt  Back to article lt  a gt  lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

Here s another  I found helpful  It works even for Responsive CSS design too   wrap      display  table     table-layout  fixed     it ll enable the div to be responsive       width  100      as display table will shrink the div to content-wide        WARNING  But this theory won t work for holder contains inner elements with absolute positions  And it will create problem for fixed-width layout  But for responsive design  it s just excellent      ADDITION TO Meep3D s ANSWER With CSS3  in a dynamic portion  you can add clear float to the last element by   wrap  class   my-div-class   last-of-type     display  block    clear  both     Where your divs are   lt div id  quot wrap quot  gt   lt  php for   i   0   i  lt  3   i           lt div class  quot my-div-class- lt  php echo  i   gt  gt         lt p gt content lt  p gt      lt  div gt   lt  --  my-div-class- lt  php echo  i   gt  -- gt     lt  div gt   Reference    last-of-type - CSS-TRICKS

User · Answer

This should do it    lt div id  wrap  gt     lt div id  nav  gt  lt  div gt     lt div id  content  gt  lt  div gt     lt div style  clear both  gt  lt  div gt   lt  div gt

User · Answer

Instead of using overflow hidden  which is a kind of hack  why not simply setting a fixed height  e g  height 500px  to the parent division

User · Answer

HTML   lt div id  wrapper  gt       lt div id  nav  gt  lt  div gt       lt div id  content  gt  lt  div gt             lt div class  clearFloat  gt  lt  div gt   lt  div gt    CSS   clearFloat       font-size  0px      line-height  0px      margin  0px      padding  0px      clear  both      height  0px

User · Answer

Here i show you a snippet where your problem is solved  i know  it s been too long since you posted it  but i think this is cleaner than de  clear  fix    x000D   x000D   nav x000D            x000D              float  left  x000D              width  25   x000D              height  150px  x000D              background-color   999  x000D              margin-bottom  10px  x000D            x000D   x000D           content x000D            x000D              float  left  x000D              margin-left  1   x000D              width  65   x000D              height  150px  x000D              background-color   999  x000D              margin-bottom  10px  x000D                   x000D           wrap x000D            x000D            background-color  DDD  x000D            overflow  hidden x000D            x000D       lt div id  wrap  gt  x000D       lt h1 gt wrap1  lt  h1 gt  x000D       lt div id  nav  gt  lt  div gt  x000D       lt div id  content  gt  lt a href  index htm  gt  amp lt  Back to article lt  a gt  lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

Aside from the clear  both hack  you can skip the extra element and use overflow  hidden on the wrapping div    lt div style  overflow  hidden   gt       lt div style  float  left   gt  lt  div gt       lt div style  float  left   gt  lt  div gt   lt  div gt

User · Answer

Float everything   If you have a floated div inside a non-floated div  everything gets all screwy  That s why most CSS frameworks like Blueprint and 960 gs all use floated containers and divs   To answer your particular question    lt div class  container  gt   lt  --  container     float  left    width  100     -- gt     lt div class  sidebar  gt     lt  --    sidebar       float  left      width  20       height  auto        -- gt     lt  div gt     lt div class  content  gt     lt  --    sidebar       float  left      width  20       height  auto        -- gt     lt  div gt   lt  div gt    should work just fine  as long as you float left  all of your  lt div gt s

User · Answer

overflow hidden  as mentioned by  Mikael S  doesn t work in every situation  but it should work in most situations   Another option is to use the  after trick    lt div class  wrapper  gt     lt div class  col  gt  lt  div gt     lt div class  col  gt  lt  div gt   lt  div gt    wrapper     min-height  1px     Required for IE7          wrapper after     clear  both    display  block    height  0    overflow  hidden    visibility  hidden    content         font-size  0        col     display  inline    float  left        And for IE6    wrapper   height  1px

User · Answer

It s a common problem when you have two floats inside a block   The best way of fixing it is using clear both after the second div    lt div style  display  block  clear  both   gt  lt  div gt    It should force the container to be the correct height

User · Answer

Use this CSS hack  it saved me lot of trouble and time   http   swiftthemes com 2009 12 css-tips-and-hacks problem-with-height-of-div-containing-floats-and-inline-lists   I use it in every project

User · Answer

lt html gt   lt head gt       lt style gt           main   border  1px  000 solid  width  600px  height  400px  margin  auto            one   width  20   height  100   background-color  blue  display  inline-block             two   width  80   height  100   background-color  red  display  inline-block         lt  style gt   lt  head gt   lt body gt   lt div id  main  gt       lt span id  one  gt one lt  span gt  lt span id  two  gt two lt  span gt   lt  div gt   lt  body gt   lt  html gt    The secret is the inline-block  If you use borders or margins  you may need to reduce the width of the div that use them   NOTE  This doesn t work properly in IE6 7 if you use  DIV  instead of  SPAN    see http   www quirksmode org css display html

[css] how to make a div to wrap two float divs inside?

ADDITION TO Meep3D's ANSWER

Examples related to css

Examples related to layout

Examples related to html

Examples related to css-float