Reputation: 129
I am trying to float a group of wrappers in 2 columns so that they will sit next to each other. Problem is that when a wrapper is larger (or smaller) than the others, I would like the other column to re-balance to that the 2 columns are event.
Below is the code that I am using and an image of what I am trying to achieve. Can anyone suggest anything that can help?
<div id="mainCategoryWrapper">
<div class="CategoryWrapper" id="Wrapper_1"></div>
<div class="CategoryWrapper" id="Wrapper_2"></div>
<div class="CategoryWrapper" id="Wrapper_3"></div>
<div class="CategoryWrapper" id="Wrapper_4"></div>
<div class="CategoryWrapper" id="Wrapper_5"></div>
<div class="CategoryWrapper" id="Wrapper_6"></div>
<div class="CategoryWrapper" id="Wrapper_7"></div>
<div class="CategoryWrapper" id="Wrapper_8"></div>
<div class="CategoryWrapper" id="Wrapper_9"></div>
</div>
Upvotes: 1
Views: 78
Reputation: 92873
For this type of functionally you need http://masonry.desandro.com/ JS.
Upvotes: 3