Combining float and nth-child clear behavior and dynamic hide box - css

Question

I gonna try to make a list of element float and clear both at the next new row because height of box are unknown and we can hide box to highlight box by category, like:
$('nav a').on('click', function(e) {
e.preventDefault();
var show = $(this).data('show');
if(show == 'all') {
$('div').show();
} else {
$('div').hide();
$('.' + show).show();
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
article {
width: 400px;
}
div {
width: 100px;
border: 1px solid black;
float: left;
padding: 10px;
margin-bottom: 10px;
}
.category-b {
background-color: #eee;
}
div:nth-child(4n+5) {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a data-show="all" href="#">All</a> /
<a data-show="category-a" href="#">Category A</a> /
<a data-show="category-b" href="#">Category B</a>
</nav>
<article>
<div class="category-b">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-a">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
<div class="category-a">hello</div>
<div class="category-a">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-b">bonjour Mr</div>
<div class="category-a">Katarina vs Alistar</div>
<div class="category-b">hello</div>
<div class="category-b">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-a">Katarina vs Alistar</div>
<div class="category-a">hello</div>
<div class="category-b">hello world folk</div>
<div class="category-b">lorem ipsum dolores</div>
<div class="category-a">bonjour Mr</div>
<div class="category-b">Katarina vs Alistar</div>
</article>
http://jsfiddle.net/Pik_at/Lwyte7sm/
The problem are, when you select an category the nth-child also takes into account the hidden box by display:none and broke the mosaic.
Would anyone have a solution? Css solution will be appreciated.

Answer 1

Quickest CSS solution:
Set a fixed height for each DIV, then float left without clear:both.
div { height:80px; }
DEMO
Or, you can use jquery to get the highest height for all DIVs and float left to get the same result.
/====================================================/
How about use display:inline-block; instead of float:left; ?
DEMO 2
*The width % might need to decrease as display:inline-block; generates some space between the DIVs.