JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<br>

<b>#1: my mother with fixed height</b>
<div id="mother" style="height:50px;">
    <div style="float: left; width: 45%;">test</div>
    <div style="float: right; width: 45%;">test</div>
</div>

<br>

<b>#2: meet my cousins &lt;br&gt; or &amp;nbsp; </b>
<div id="mother">
    <div style="float: left; width: 45%;">test</div>
    <div style="float: right; width: 45%;">test</div>
    <br/>
</div>

<br>

<b>#3: a new child with clear:both</b>
<div id="mother">
    <div style="float: left; width: 45%;">test</div>
    <div style="float: right; width: 45%;">test</div>
    <div style="clear:both;"></div>
</div>

<br>

<b>#4: my mother with overflow:hidden</b>
<div id="mother" style="overflow: hidden; width:100%; height:100%;">
    <div style="float: left; width: 45%;">test</div>
    <div style="float: right; width: 45%;">test</div>
</div>

<br>

<b>#5: my mother with pseudo selector :after</b>
<div id="mother" class="clearfix">
    <div style="float: left; width: 45%;">test</div>
    <div style="float: right; width: 45%;">test</div>
</div>

CSS

#mother {border:1px solid #ff0000;}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

JavaScript

/*
  
    SmashingMagazine Meetup#5 - CSS3 Master Class
    
    -----------------------------------------------------------------------------

    www.tim-pietrusky.de
    http://twitter.com/#!/TimPietrusky
    https://github.com/TimPietrusky

    -----------------------------------------------------------------------------
    
    These are my 4 approaches to let mother enclose her children. 


    #1:  my mother with fixed height
    The fixed height of mother is not good, because if the childs content grow, the mother has to grow to. 

    #2: meet my cousins <br> or &nbsp;
    Same as #1: if the childs content grows, you have to put more of these cousins into mother. 
    
    #3: a new child with clear:both
    You have to add a new child after the floating childs to stop floating for succeeding elements

    #4: my mother with overflow:hidden
    My mother expands to contain her childs and stops floating for succeeding elements. 

    #5: my mother with pseudo selector :after
    My mother don't need extra css (like #4) and we can reuse .clearfix for other partens (like #father).
*/