I am trying to create number of boxes using div (each div having different number of contents) and each 2 div should be in a row.
But the problem is if one div has more content then it gets bigger than the other one. This creates a space below the other div and the next div comes after that.
i am using angular js ng-repeat for creating all the divs. The code i used is as below:
<div id="form" ng-controller="JobApplicationFormController">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" ng-repeat="x in categorylist" style="margin-bottom:10px">
<div class="card1">
<div class="container1">
<div style="border-bottom:1px solid #ccc;padding: 5px;margin-left: -16px;margin-right: -16px;font-size:20px !important;color:black">
<img src="~/Images/form.ico" style="height:50px" /> <b>{{x.categoryName}}</b>
</div>
<div ng-repeat="y in formlist" ng-if="y.categoryId==x.id" id="{{y.id}}" onclick="return popitup('../../Applications/Form/' + this.id)" class="formlist" title="click to upload" style="cursor:pointer;padding: 5px;margin-left: -16px;margin-right: -16px;border-bottom:1px solid #ccc;">
<a href="#" style="text-decoration:none" ng-if="y.status=='Completed'" ><img src="~/Images/green_circle.png" style="height:15px" /> <font color="green"> {{y.formName}} </font></a>
<a href="#" style="text-decoration:none" ng-if="y.status!='Completed'" ><img src="~/Images/red_circle.png" style="height:15px" /> <font color="red"> {{y.formName}} </font> </a>
</div>
</div>
</div>
</div>
</div>
I've tried this[Auto adjusting div based on inside content for reference but it doesn't works properly. there is overflow of content.
Edit1: I did try this [CSS-only masonry layout but with elements ordered horizontally already but it is not getting me near to anywhere what I want to achieve. the div part is what is causing a lot of trouble.
