Floating elements within a div floats outside of div Why

Question

Say you have a div  give it a definite width and put elements in it  in my case an img and another div    The idea is that the content of the container div will cause the container div to stretch out  and be a background for the content  But when I do this  the containing div shrinks to fit the non-floating objects  and the floating objects will be either all the way out  or half out  half in  and not have any bearing on the size of the big div   Why is this  Is there something I m missing  and how can I get floated items to stretch out the height of a containing div

User · Answer

Thank you LSerni you solved it for me   To achieve this     -----------------------------------------     -------                       -------        Text1                         Text1        -------                       -------      ----------------------------------------    You have to do this     lt div style  overflow auto  gt       lt div style  display inline-block float left  gt  Text1  lt  div gt       lt div style  display inline-block float right  gt  Text2  lt  div gt   lt  div gt

User · Answer

Here s more modern approach     parent  display  flow-root      No more clearfixes    p s  Using overflow  hidden  hides the box-shadow so

User · Answer

There s nothing missing  Float was designed for the case where you want an image  for example  to sit beside several paragraphs of text  so the text flows around the image  That wouldn t happen if the text  stretched  the container  Your first paragraph would end  and then your next paragraph would begin under the image  possibly several hundred pixels below    And that s why you re getting the result you are

User · Answer

As Lucas says  what you are describing is the intended behaviour for the float property  What confuses many people is that float has been pushed well beyond its original intended usage in order to make up for shortcomings in the CSS layout model   Have a look at Floatutorial if you d like to get a better understanding of how this property works

User · Answer

Put your floating div s  in a div and in CSS give it overflow hidden  it will work fine

User · Answer

W3Schools recommendation   put overflow  auto on parent element and it will  color  whole background including elements margins  Also floating elements will stay inside of border   http   www w3schools com css tryit asp filename trycss layout clearfix

User · Answer

In some cases  i e  when  if  you re just using float to have elements flow on the same  line   you might use   display  inline-block    instead of  float  left    Otherwise  using a clear element at the end works  even if it may go against the grain to need an element to do what should be CSS work

User · Answer

You can easily do with first you can make the div flex and apply justify content right or left and your problem is solved    x000D   x000D   lt div style  display  flex padding-bottom  8px justify-content  flex-end   gt  x000D        lt button style  font-weight  bold outline  none background-color   2764ff border-radius  3px margin-left  12px border  none padding  3px 6px color  white text-align  center font-family   Open Sans   sans-serif text-decoration  none margin-right  14px   gt Sense lt  button gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

The easiest is to put overflow hidden on the parent div and don t specify a height    parent   overflow  hidden     Another way is to also float the parent div    parent   float  left  width  100      Another way uses a clear element    lt div class  parent  gt      lt img class  floated child  src         gt      lt span class  clear  gt  lt  span gt   lt  div gt    CSS  span clear   clear  left  display  block

User · Answer

Reason  The problem is that floating elements are out-of-flow      An element is called out of flow if it is floated  absolutely   positioned  or is the root element    Therefore  they don t impact surrounding elements as an in-flow element would   This is explained in 9 5 Floats      Since a float is not in the flow  non-positioned block boxes created   before and after the float box flow vertically as if the float did not   exist  However  the current and subsequent line boxes created next to   the float are shortened as necessary to make room for the margin box   of the float       x000D   x000D  html   x000D    width  550px  x000D    border  1px solid  x000D    x000D  body   x000D    font-family  sans-serif  x000D    color  rgba 0 0 0  15   x000D    x000D  body after   x000D    content      x000D    display  block  x000D    clear  both  x000D    x000D  div   x000D    position  relative  x000D    x000D  div after   x000D    font-size  200   x000D    position  absolute  x000D    left  0  x000D    right  0  x000D    top  0  x000D    text-align  center  x000D    x000D   block-sibling   x000D    border  3px solid green  x000D    x000D   block-sibling after   x000D    content   Block sibling   x000D    color  green  x000D    x000D   float   x000D    float  left  x000D    border  3px solid red  x000D    height  90px  x000D    width  150px  x000D    z-index  1  x000D    x000D   float after   x000D    content   Float   x000D    color  red  x000D    x000D   lt div class  float  gt  lt  div gt  x000D   lt div class  block-sibling  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Donec a diam lectus  Sed sit amet ipsum mauris  Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit  Donec et mollis dolor  Praesent et diam eget libero egestas mattis sit amet vitae augue  Nam tincidunt congue enim  ut porta lorem lacinia consectetur  Donec ut libero sed arcu vehicula ultricies a non tortor  x000D   lt  div gt  x000D   x000D   x000D    This is also specified in 10 6 Calculating heights and margins  For  normal  blocks      Only children in the normal flow are taken into account  i e     floating boxes and absolutely positioned boxes are ignored             x000D   x000D  html   x000D    width  550px  x000D    border  1px solid  x000D    x000D  body   x000D    font-family  sans-serif  x000D    color  rgba 0 0 0  15   x000D    x000D  body after   x000D    content      x000D    display  block  x000D    clear  both  x000D    x000D  div   x000D    position  relative  x000D    x000D  div after   x000D    font-size  200   x000D    position  absolute  x000D    left  0  x000D    right  0  x000D    top  0  x000D    text-align  center  x000D    x000D   block-parent   x000D    border  3px solid blue  x000D    x000D   block-parent after   x000D    content   Block parent   x000D    color  blue  x000D    x000D   float   x000D    float  left  x000D    border  3px solid red  x000D    height  130px  x000D    width  150px  x000D    x000D   float after   x000D    content   Float   x000D    color  red  x000D    x000D   lt div class  block-parent  gt  x000D     lt div class  float  gt  lt  div gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Donec a diam lectus  Sed sit amet ipsum mauris  Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit  x000D   lt  div gt  x000D   x000D   x000D    Hacky solution  clearance  A way to solve the problem is forcing some in-flow element to be placed below all floats  Then  the height of the parent will grow to wrap that element  and thus the floats too    This can be achieved using the clear property      This property indicates which sides of an element s box es  may not   be adjacent to an earlier floating box       x000D   x000D  html   x000D    width  550px  x000D    border  1px solid  x000D    x000D  body   x000D    font-family  sans-serif  x000D    color  rgba 0 0 0  15   x000D    x000D  body after   x000D    content      x000D    display  block  x000D    clear  both  x000D    x000D  div   x000D    position  relative  x000D    x000D  div after   x000D    font-size  200   x000D    position  absolute  x000D    left  0  x000D    right  0  x000D    top  0  x000D    text-align  center  x000D    x000D   block-parent   x000D    border  3px solid blue  x000D    x000D   block-parent after   x000D    content   Block parent   x000D    color  blue  x000D    x000D   float   x000D    float  left  x000D    border  3px solid red  x000D    height  84px  x000D    width  150px  x000D    x000D   float after   x000D    content   Float   x000D    color  red  x000D    x000D   clear   x000D    clear  both  x000D    text-align  center  x000D    height  37px  x000D    border  3px dashed pink  x000D    x000D   clear after   x000D    position  static  x000D    content   Block sibling with clearance   x000D    color  pink  x000D    x000D   lt div class  block-parent  gt  x000D     lt div class  float  gt  lt  div gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Donec a diam lectus  Sed sit amet ipsum mauris  Maecenas congue ligula ac quam viverra  x000D     lt div class  clear  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    So a solution is adding an empty element with clear  both as the last sibling of the floats   lt div style  clear  both  gt  lt  div gt    However  that is not semantic  So better generate a pseudo-element at the end of the parent    clearfix  after     clear  both    display  block      There are multiple variants of this approach  e g  using the deprecated single colon syntax  after to support old browsers  or using other block-level displays like display  table   Solution  BFC roots  There is an exception to the problematic behavior defined at the beginning  if a block element establishes a Block Formatting Context  is a BFC root   then it will also wrap its floating contents   According to 10 6 7  Auto  heights for block formatting context roots      If the element has any floating descendants whose bottom margin edge   is below the element s bottom content edge  then the height is   increased to include those edges       x000D   x000D  html   x000D    width  550px  x000D    border  1px solid  x000D    x000D  body   x000D    font-family  sans-serif  x000D    color  rgba 0 0 0  15   x000D    x000D  body after   x000D    content      x000D    display  block  x000D    clear  both  x000D    x000D  div   x000D    position  relative  x000D    x000D  div after   x000D    font-size  200   x000D    position  absolute  x000D    left  0  x000D    right  0  x000D    top  0  x000D    text-align  center  x000D    x000D   block-parent   x000D    border  3px solid blue  x000D    x000D   block-parent bfc-root after   x000D    content   BFC parent   x000D    color  blue  x000D    x000D   float   x000D    float  left  x000D    border  3px solid red  x000D    height  127px  x000D    width  150px  x000D    x000D   float after   x000D    content   Float   x000D    color  red  x000D    x000D   bfc-root   x000D    overflow  hidden  x000D    x000D   lt div class  block-parent bfc-root  gt  x000D     lt div class  float  gt  lt  div gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Donec a diam lectus  Sed sit amet ipsum mauris  Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit  x000D   lt  div gt  x000D   x000D   x000D    Additionally  as explained 9 5 Floats  BFC roots are also useful because of the following      The border box of a table  a block-level replaced element  or an   element in the normal flow that establishes a new block formatting   context       must not overlap the margin box of any floats in the same   block formatting context as the element itself       x000D   x000D  html   x000D    width  550px  x000D    border  1px solid  x000D    x000D  body   x000D    font-family  sans-serif  x000D    color  rgba 0 0 0  15   x000D    x000D  body after   x000D    content      x000D    display  block  x000D    clear  both  x000D    x000D  div   x000D    position  relative  x000D    x000D  div after   x000D    font-size  200   x000D    position  absolute  x000D    left  0  x000D    right  0  x000D    top  0  x000D    text-align  center  x000D    x000D   block-sibling   x000D    border  3px solid green  x000D    x000D   block-sibling bfc-root after   x000D    content   BFC sibling   x000D    color  green  x000D    x000D   float   x000D    float  left  x000D    border  3px solid red  x000D    height  90px  x000D    width  150px  x000D    z-index  1  x000D    x000D   float after   x000D    content   Float   x000D    color  red  x000D    x000D   bfc-root   x000D    overflow  hidden  x000D    x000D   lt div class  float  gt  lt  div gt  x000D   lt div class  block-sibling bfc-root  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Donec a diam lectus  Sed sit amet ipsum mauris  Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit  Donec et mollis dolor  Praesent et diam eget libero egestas mattis sit amet vitae augue  Nam tincidunt congue enim  ut porta lorem lacinia consectetur  x000D   lt  div gt  x000D   x000D   x000D    A block formatting context is established by   Block boxes with overflow other than visible  e g  hidden   bfc-root     overflow  hidden       display  block        Block containers that are not block boxes  when display is set to inline-block  table-cell or table-caption    bfc-root     display  inline-block     Floating elements  when float is set to left or right    bfc-root     float  left     Absolutely positioned elements  when position is set to absolute or fixed    bfc-root     position  absolute       Note those may have undesired collateral effects  like clipping overflowing content  calculating auto widths with the shrink-to-fit algorithm  or becoming out-of-flow  So the problem is that it s not possible to have an in-flow block-level element with visible overflow that establishes a BFC   Display L3 addresses these issues      Created the flow and flow-root inner display   types to better express flow layout display types and to   create an explicit switch for making an element a BFC root     This should eliminate the need for hacks like   after   clear  both    and overflow  hidden          Sadly  there is no browser support yet  Eventually we may be able to use   bfc-root     display  flow-root

[css] Floating elements within a div, floats outside of div. Why?

Examples related to css

Examples related to html

Examples related to css-float