Masonry layout with CSS - How to make div not break - html

Question

My html is like this
.head-heading {
padding-left: 0px;
padding-right: 0px;
font-size: 32px;
color: #525659;
margin: 0 0 2px 0;
font-weight: 100 !important;
}
.divsection .col-md-4 {
padding-left: 0px;
padding-right: 0px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.contact-smaldiv {
margin-bottom: 25px;
font-weight: 100;
font-size: 14px;
padding: 0 15px 0 0px;
}
.contact-smaldiv h1, .contact-smaldiv h2, .contact-smaldiv h3, .contact-smaldiv h4 {
color: #ef9c00;
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Lato',sans-serif !important;
padding: 0;
line-height: 1.4;
margin: 0;
}
h1.contact-name, h2.contact-name, h3.contact-name, h4.contact-name {
color: #16100f;
font-size: 14px !important;
margin: 0px 0 6px 0;
font-weight: 800 !important;
}
.contact-smaldiv p {
margin: 2px 0 3px 0;
line-height: 1.1em;
color: #414042;
font-size: 13px;
font-family: 'AkzidenzGrotesk-Medium';
font-weight: 100 !important;
}
.divsection { /* Masonry container */
column-count: 3;
column-gap: 1em;
}
.col-md-4 { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
<div class="row">
<h1 class="head-heading">What is Lorem Ipsum?</h1>
<div class="divsection">
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Why do we use it?
</h1>
<h4 class="contact-name"></h4>
<p>
<label>No:</label>
375 9777
</p>
<p>
<label>Email:</label>
<a href="mailto:dfdjff#gmail.com">
ddfdjff#gmail.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where does it come from?
</h1>
<h4 class="contact-name">
Name
</h4>
<p>
<label>Phone:</label>
052794959
</p>
<p>
<label>Cell:</label>
724 455
</p>
<p>
<label>Email:</label>
<a href="mailto:d#dummy.com">
d#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where can I get some?
</h1>
<h4 class="contact-name">
Second name
</h4>
<p>
<label>gfjgjf:</label>
375 9720
</p>
<p>
<label>Cell:</label>
4545464
</p>
<p>
<label>Email:</label>
<a href="mailto:j#dummy.com">
j#dummy.com
</a>
</p>
<p>
<label>id:</label>
<a href="mailto:t#dummy.com">
t#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
1914 translation by H. Rackham
</h1>
<h4 class="contact-name">
charity
</h4>
<p>
<label>DDI:</label>
375 9715
</p>
<p>
<label>Cell:</label>
221952
</p>
<p>
<label>id:</label>
<a href="mailto: r#dummy.com">
r#dummy.com
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Coming Soon
</h4>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Lorem Ipsum
</h4>
<p>
<label>I:</label>
3759723
</p>
<p>
<label>C:</label>
2330079
</p>
<p>
<label>id:</label>
<a href="mailto:s#dummy.com">
s#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
My name
</h4>
<p>
<label>D:</label>
3759727
</p>
<p>
<label>C:</label>
914844
</p>
<p>
<label>id:</label>
<a href="mailto:b#dummy.com">
b#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
<!-- col md end-->
</div>
<div class="clearfix"></div>
</div>
</div>
As you can see, my first column third Div is breaking in to two, and occupying first and second column, i don't want this behaviour, if there is no space to occuppy that col-md-4 element I want it to go to next column completely, How can I achieve this?

Answer 1

Remove the float from the bricks. That's overwriting the display: inline-block because floating an element makes it block
.head-heading {
padding-left: 0px;
padding-right: 0px;
font-size: 32px;
color: #525659;
margin: 0 0 2px 0;
font-weight: 100 !important;
}
.divsection .col-md-4 {
padding-left: 0px;
padding-right: 0px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.contact-smaldiv {
margin-bottom: 25px;
font-weight: 100;
font-size: 14px;
padding: 0 15px 0 0px;
}
.contact-smaldiv h1, .contact-smaldiv h2, .contact-smaldiv h3, .contact-smaldiv h4 {
color: #ef9c00;
font-size: 16px !important;
font-weight: 600 !important;
font-family: 'Lato',sans-serif !important;
padding: 0;
line-height: 1.4;
margin: 0;
}
h1.contact-name, h2.contact-name, h3.contact-name, h4.contact-name {
color: #16100f;
font-size: 14px !important;
margin: 0px 0 6px 0;
font-weight: 800 !important;
}
.contact-smaldiv p {
margin: 2px 0 3px 0;
line-height: 1.1em;
color: #414042;
font-size: 13px;
font-family: 'AkzidenzGrotesk-Medium';
font-weight: 100 !important;
}
.divsection { /* Masonry container */
column-count: 3;
column-gap: 1em;
}
.col-md-4 { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
float: none;
}
<div class="row">
<h1 class="head-heading">What is Lorem Ipsum?</h1>
<div class="divsection">
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Why do we use it?
</h1>
<h4 class="contact-name"></h4>
<p>
<label>No:</label>
375 9777
</p>
<p>
<label>Email:</label>
<a href="mailto:dfdjff#gmail.com">
ddfdjff#gmail.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where does it come from?
</h1>
<h4 class="contact-name">
Name
</h4>
<p>
<label>Phone:</label>
052794959
</p>
<p>
<label>Cell:</label>
724 455
</p>
<p>
<label>Email:</label>
<a href="mailto:d#dummy.com">
d#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
Where can I get some?
</h1>
<h4 class="contact-name">
Second name
</h4>
<p>
<label>gfjgjf:</label>
375 9720
</p>
<p>
<label>Cell:</label>
4545464
</p>
<p>
<label>Email:</label>
<a href="mailto:j#dummy.com">
j#dummy.com
</a>
</p>
<p>
<label>id:</label>
<a href="mailto:t#dummy.com">
t#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
1914 translation by H. Rackham
</h1>
<h4 class="contact-name">
charity
</h4>
<p>
<label>DDI:</label>
375 9715
</p>
<p>
<label>Cell:</label>
221952
</p>
<p>
<label>id:</label>
<a href="mailto: r#dummy.com">
r#dummy.com
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Coming Soon
</h4>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
Lorem Ipsum
</h4>
<p>
<label>I:</label>
3759723
</p>
<p>
<label>C:</label>
2330079
</p>
<p>
<label>id:</label>
<a href="mailto:s#dummy.com">
s#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
</div>
<!-- col md end-->
<div class="col-md-4">
<div class="contact-smaldiv">
<!-- starts of info-->
<div>
<div>
<h1 class="add-heading">
What is Lorem Ipsum?
</h1>
<h4 class="contact-name">
My name
</h4>
<p>
<label>D:</label>
3759727
</p>
<p>
<label>C:</label>
914844
</p>
<p>
<label>id:</label>
<a href="mailto:b#dummy.com">
b#dummy.com
</a>
</p>
</div>
</div>
<!-- end of info-->
</div>
<!-- col md end-->
</div>
<div class="clearfix"></div>
</div>
</div>