I'm dealing with dynamically created divs that have variable content, all following the same CSS rules. My goal is to organize them into 2 columns without any space in between. I attempted to use float: left/right, but there still remains space at the top and bottom.
Below is a snippet of the code (also available on JSFiddle):
.posts{
width: 100%;
}
.one{
background-color: red;
height: 100px;
width: 40%;
float: left;
}
.two{
background-color: blue;
height: 120px;
width: 40%;
float: left;
}<div class="posts">
<div class="one">
</div>
<div class="two">
</div>
<div class= "two">
</div>
<div class ="one">
</div>
</div>While the right column's div boxes turn out correctly, they create a gap between the top left box and the bottom div. I've explored various examples, but many suggest tweaking the divs individually using overflow: hidden and other techniques.
What would be the most effective way to achieve this while keeping all the divs consistent with the same CSS?