Fix Gaps Plugin to fix floating div gap problem

by quirksmode

HTML

<script src="http:///www.davidplunkett.co.uk/files/work/js/plugins/fixgaps/jquery.fixGaps.js"></script>
<body>
    <div id="fixGaps" class="main-wrap">
        <div class="module left" style="background-color:red;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla ligula, faucibus quis ullamcorper ut, congue sit amet risus. Vivamus auctor sagittis metus, ut aliquet tellus tincidunt quis. Donec sapien urna, ultrices sed semper ut, condimentum a risus. Fusce in dolor id neque sagittis porta.</p>
        </div>
        <div class="module right" style="background-color:blue;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla ligula, faucibus quis ullamcorper ut, congue sit amet risus. Vivamus auctor sagittis metus, ut aliquet tellus tincidunt quis. Donec sapien urna, ultrices sed semper ut, condimentum a risus. Fusce in dolor id neque sagittis porta.</p>
        </div>
        <div class="module left" style="background-color:green;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla ligula, faucibus quis ullamcorper ut, congue sit amet risus. Vivamus auctor sagittis metus, ut aliquet tellus tincidunt quis. Donec sapien urna, ultrices sed semper ut, condimentum a risus. Fusce in dolor id neque sagittis porta.</p>
        </div>
        <div class="module right" style="background-color:orange;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla ligula, faucibus quis ullamcorper ut, congue sit amet risus. Vivamus auctor sagittis metus, ut aliquet tellus tincidunt quis. Donec sapien urna, ultrices sed semper ut, condimentum a risus. Fusce in dolor id neque sagittis porta.</p>
        </div>
        <div class="module left" style="background-color:purple;">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nulla ligula, faucibus quis ullamcorper ut, congue sit amet risus. Vivamus auctor sagittis metus, ut aliquet tellus...

CSS

* {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            .main-wrap div {
                width:50%;
                padding:20px;
                position: relative;
            }
            .left {
                float:left;
                clear:left;
            }
            .right {
                float:right;
                clear:right;
            }

JavaScript

//#fixGaps is the main wrapper id, you can change this to anything, to use my default class names use this:
$('#fixGaps').fixGaps();

// You can use your own custom classes by updating the options and calling the plugin like this:
$('#fixGaps').fixGaps({
    module: '.module',
    leftModule: '.left',
    rightModule: '.right'
});