Playing with float and clear
HTML
<div class="container">
<span id="red">
<h2>Box 1</h2>
<ul>
<li>
<label><input type="radio" name="box1-align" value="float-none" checked> float: none</label>
</li>
<li>
<label><input type="radio" name="box1-align" value="float-left"> float: left</label>
</li>
<li>
<label><input type="radio" name="box1-align" value="float-right"> float: right</label>
</li>
</ul>
</span>
<span id="green">
<h2>Box 2</h2>
<ul>
<li>
<label><input type="radio" name="box2-align" value="float-none" checked> float: none</label>
</li>
<li>
<label><input type="radio" name="box2-align" value="float-left"> float: left</label>
</li>
<li>
<label><input type="radio" name="box2-align" value="float-right"> float: right</label>
</li>
</ul>
<ul>
<li>
<label><input type="radio" name="box2-clear" value="clear-none" checked> clear: none</label>
</li>
<li>
<label><input type="radio" name="box2-clear" value="clear-left"> clear: left</label>
</li>
<li>
<label><input type="radio" name="box2-clear" value="clear-right"> clear: right</label>
</li>
<li>
<label><input type="radio" name="box2-clear" value="clear-both"/> clear: both</label>
</li>
</ul>
</span>
<span id="blue">
<h2>Box 3</h2>
<ul>
<li>
<label><input type="radio" name="box3-align" value="float-none" checked> float: none</label>
</li>
<li>
<label><input type="radio" name="box3-align" value="float-left"> float: left</label>
</li>
<li>
<label><input type="radio" name="box3-align" value="float-right"> float: right</label>
</li>
</ul>
<ul>
<li>
<label><input type="radio" name="box3-clear" value="clear-none" checked> clear: none</label>
</li>
<li>
<label><input type="radio" name="box3-clear" value="clear-left"> clear: left</label>
</li>
<li>
<label><input type="radio" name="box3-clear" value="clear-right"> clear: right</label>
</li>
<li>
<label><input type="radio" name="box3-clear" value="clear-both"> clear: both</label>
</li>
</ul>
</span>
</div>
CSS
/* THE BOXES */
#red { background-color: #f44336; }
#green { background-color: #4caf50; }
#blue { background-color: #2196f3; }
/* THE CLASSES */
.float-none { float: none; }
.float-left { float: left; }
.float-right { float: right; }
.clear-none { clear: none; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }
/* THE STAGE */
* {
box-sizing: border-box;
}
.container {
background-color: lightgrey;
border: 2px dashed #555;
border-radius: 8px;
margin: 12px auto;
padding: 10px;
width: 567px;
}
span {
border-radius: 4px;
color: black;
display: block; /* <-- remember floating elements don't need this */
height: 180px;
margin: 0 1px 1px 0;
padding: 9px;
overflow: hidden; /* == `clearfix` */
width: 180px;
}
h2 {
display: block;
font-size: 125%;
margin: 0;
text-align: center;
text-transform: uppercase;
}
ul {
list-style: none;
margin: 0.5em;
padding: 0;
}
label, input { cursor: pointer; }
label { font-size: 85%; }
JAVASCRIPT
/**
* Just for the radios
* Special thanks to Helton Valentini
*/
$('input:radio').change(function(){
var $el = $(this).closest('span'),
$checked = $el.find(':checked');
$el.removeClass();
$checked.each(function(){
$el.addClass((this.value));
});
});
