Equalizer Playground

https://github.com/CSS-Tricks/Equalizer

by Mottie

HTML

<script src="http://css-tricks.github.com/Equalizer/js/jquery.equalizer.js"></script>
    <div class="content-wrap">
        <div><h1>Header</h1>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</div>
        <div><h1>Header</h1>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</div>
        <div><h1>Header</h1>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</div>
        <div><h1>Header</h1>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</div>
        <div><h1>Header</h1>5. Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</div>
        <div><h1>Header</h1>6. Quisque nec ante mi, ac tempus turpis.</div>
        <div><h1>Header</h1>7. Quisque vel erat turpis. Fusce accumsan venenatis dapibus. Mauris viverra, felis non laoreet vestibulum, leo nibh vulputate justo, in accumsan libero magna nec metus. Ut condimentum mauris nisl. Vivamus in nunc nisl. Proin commodo, mauris a placerat pellentesque, justo nisi euismod lacus, ut porttitor dui erat sit amet mi.</div>
        <div><h1>Header</h1>8. Nam gravida neque eget diam venenatis semper. Phasellus ultricies porttitor nisl. Nam adipiscing mollis magna et dictum. Praesent ornare tempor augue, sit amet lobortis risus dictum at. Donec ligula felis,...

CSS

.content-wrap div.overflowed { overflow: auto; background: #aaa; }

.content-wrap {
    width: 100%;
    display: block;
    float: left;
    margin: 10px auto;
}

.content-wrap div {
    width: 48%;
    background: #ccc;
    display: block;
    float: left;
    font-size: 10px;
    margin: 0 .5% .5% 0;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content-wrap h1 {
    font-family: Verdana,Tahoma,Segoe,sans-serif;
    text-align: center;
    font-size: 15px;
    margin: 0 0 10px 0;
}

.breakpoint div {
    float: none;
    width: 100%;
    margin: 0 0 10px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.clear {
    clear: both;
}

JavaScript

$('.content-wrap').equalizer({

    // elements inside of the wrapper
    columns: '> div',

    // height = type of height to use
    // "o" or "outer" = "outerHeight" - includes height + padding + border + margin
    // "i" or "inner" = "innerHeight" - includes height + padding + border
    // default        = "height"      - use just the height
    useHeight: 'height',

    // when true, heights are adjusted on window resize
    resizeable: true,

    // Minimum height applied to all columns
    min: 0,

    // Max height applied to all columns; default = 0
    max: 140,

    // if browser less than this width, disable the plugin
    breakpoint: null,
    
    // class applied when browser width is less than the breakpoint value
    disabled: 'breakpoint',

    // class applied to columns that are taller than the allowable max
    overflow: 'overflowed'

});