JSFiddle - React, Tailwind, and code Playground

by salvadoresc

HTML

<div class="cf" id="cuerpo"><div class="box box1">&nbsp;</div>
<div class="box box2">&nbsp;</div>
<div class="box box3">&nbsp;</div>
</div>
<div class="box left">&nbsp;</div><div class="box right">&nbsp;</div>

CSS

#cuerpo{
    width:600px;
    border: 1px dotted #ccc;
 }

.box {
	height: 100px;
	width: 100px;
	border: 1px solid #000;
    float:left;
    margin:4px;
}
.box1{
	border: 1px solid #F00;
}
.box2{
	border: 1px solid #0F0;
	
}
.box3{
	border: 1px solid #00F;
}
.left{
float:left;
}
.right{
float:right;
}


.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}