Using Display: Table instead of a Clearfix

[email protected]

by Ryan Brackett

HTML

A demo to show what display: table CSS does to a container with floated items.This is super easy and is done with CSS, meaning there is not pesky empty clearfix div to create.
<br/>
<br/>
<input id="click" type="button" value="Turn 'display: table' on/off">
<br/>
<br/>
    
<div class="wrapper">
    <div class="float">These</div>
    <div class="float">divs</div>
    <div class="float">are</div>
    <div class="float">floated</div>
</div>

    <b>After-float content starts here.</b> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

CSS

.wrapper {
    background-color: #dedede;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid red;
}
.float {
    float: left;
    padding: 20px;
    text-align: center;
}
.wrapper.with-display-table {
    display: table;
}

JavaScript

//start Button just to show what display: table CSS does to a container with floated items.
$('#click').click(

function () {
    $(".wrapper").toggleClass("with-display-table");

});
//end MOBILE NAV