Sorting divs in grid format using only CSS

rockdaddy

New Member
I have a problem in sorting the div(s), i have two types \[code\]a, b\[/code\]\[code\]a - should always be at the front (all a types)b - should be following all a types.\[/code\]HTML:\[code\]<div class="" style=""> <div class="a">a</div> <div class="a">a</div> <div class="b">b</div> <div class="a">a</div></div>\[/code\]CSS:\[code\].a, .b { display:inline-block; width:50px; height:50px; padding:15px; margin:5px;}.a { float:left; background-color: blue;}.b { background-color: red; }\[/code\]This seems to work fine in a line:
8llBL.png
But breaks as a grid:
Dq46x.png
Desired result (number of boxes is irrelevant):
eNHj5.jpg
JsFiddle: http://jsfiddle.net/kQkn9/How would i go about fixing this problem?
 
Back
Top