Search code examples
cssmixitup

Paragraphs inside inline-wrapped divs become vertically misaligned

I'm trying out the MixItUp jQuery plugin, and I'm having a hard time getting the CSS to work right. I have five divs with display: inline-block, percentage-based widths, and fixed heights. Whenever the text in the p elements wraps so that they have different number of lines, the non-wrapped divs appear lower than the ones with the wrap.

I don't think using the MixItUp plugin is the problem in this case per se, but perhaps it is.

See http://jsfiddle.net/don01001100/8p80njxa/. Try expanding and shrinking the Result area.

Thanks!

edit: I added some screenshots as well as some static HTML code with basic CSS that exhibits the problem. Basically, I want the boxes to always be vertically aligned, but as the content wraps, they become staggered.

HTML

<div class="controls">
    <button class="filter" data-filter="all" type="button">
        All
    </button> 
    <button class="filter" data-filter=".blue" type="button">
        Blue
    </button>
    <button class="filter" data-filter=".green" type="button">
        Green
    </button>
</div>

<div>
   <button class="sort" data-sort="myorder:asc">Ascencind</button>
    <button class="sort" data-sort="myorder:desc">Descending</button>
</div>

<div id="color-container">
    <div class="mix green" data-myorder="1">
        <p>Lorem Ispum</p>
    </div>    
    <div class="mix blue" data-myorder="2">
        <p>Dolor Sit Amet</p>
    </div>    
    <div class="mix blue" data-myorder="3">
        <p>Consectetur Adipiscing</p>
    </div>   
    <div class="mix green" data-myorder="4">
        <p>Nam Commodo</p>
    </div>  
    <div class="mix blue" data-myorder="5">
        <p>Mauris Sit Amet</p>
    </div>   
</div>

JavaScript

$(document).ready(function(){
    // Start mixitup
    $('#color-container').mixItUp();

    // See http://jsfiddle.net/T2Xe9/.    

    // Step 1: Select the style element and change it to text/less
    $('head style[type="text/css"]').attr('type','text/less');

    // Step 2: Set development mode to see errors
    less.env = 'development';

    // Step 3: Tell Less to refresh the styles
    less.refreshStyles();
});

LESS

#color-container {
    border: 1px dashed #CCC;
    padding: 3px;
    text-align: center;
    .mix {
        display: none;
        width: 15%;
        height: 30px;
        padding: 3px;
        text-align: center;
        &.green {
            background-color: #9F9;
            border: 1px solid #6C6;
        }
        &.blue {
            background-color: #69F;
            border: 1px solid #36C;
        }
        &::after {
            content: attr(data-myorder);
            color: #FFF;
            float: left;
            font-size: .75em;
        }
    }
}

Results of Shrinking the Page

How it looks when no lines wrap

How it looks when one line wraps

enter image description here

enter image description here

Static HTML Code with Basic CSS

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>MixItUp Example - jsFiddle demo</title>
        <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />

        <style type='text/css'>
            #color-container {
                border: 1px dashed #CCC;
                padding: 3px;
                text-align: center;
            }
                #color-container .mix {
                    display: inline-block;
                    width: 15%;
                    height: 30px;
                    padding: 3px;
                    text-align: center;
                }
                    #color-container .mix.green {
                        border: 1px solid #6C6;
                    }
                    #color-container .mix.blue {
                        border: 1px solid #36C;
                    }
        </style>
    </head>
    <body>
        <div id="color-container">
            <div class="mix green" data-myorder="1">
                Lorem Ispum
            </div>
            <div class="mix blue" data-myorder="2">
                Dolor Sit Amet
            </div>
            <div class="mix blue" data-myorder="3">
                Consectetur Adipiscing
            </div>
            <div class="mix green" data-myorder="4">
                Nam Commodo
            </div>
            <div class="mix blue" data-myorder="5">
                Mauris Sit Amet
            </div>
        </div>
    </body>
</html>
Solution

  • Add vertical-align: top to elements with display: inline-block