CODEWITHSUNDEEP
htmlcss
Timothy Bassett
Timothy Bassett

Reputation: 129

2 column with floating wrappers

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>

enter image description here

Upvotes: 1

Views: 78

Answers (1)

sandeep
sandeep

Reputation: 92873

For this type of functionally you need http://masonry.desandro.com/ JS.

Upvotes: 3

Related Questions