CSS Floating Div Problems - html

Question

Please take a look at the picture provided above, each box is a div which is working fine, but in some cases the div labelled "BIG BOX" creates some free space on each line.
Is there is anyway to fill the free area with my current css setup:
.topic_box_small{
z-index:3;
outline: red solid 1px;
display: block;
position: relative;
float:left;
width:115px;
height:115px;
overflow: no-content;
background-color: burlywood;
box-shadow: #999999 0px 0px 2px ;
border-radius:5px;
margin:5px;
}
.topic_box_medium{
z-index:3;
outline: red solid 1px;
display: block;
position: relative;
float: left;
width:240px;
height:115px;
overflow: no-content;
background-color: palegreen;
box-shadow: #999999 0px 0px 2px ;
border-radius:5px;
margin:5px;
}
.topic_box_large{
z-index:3;
outline: red solid 1px;
display: block;
position: relative;
float: left;
width:240px;
height:240px;
overflow: no-content;
background-color: orange;
box-shadow: #999999 0px 0px 2px ;
border-radius:5px;
margin:5px;
}
.category_Heading{
z-index:3;
display: block;
position: relative;
width: 100%;
text-height: 20px;
padding: 5px;
font-size: 15px;
text-align: center;
clear:both;
background-color: #fff;
color:brown;
box-shadow: #999999 0px 0px 2px ;
}
.topic_Wrapper{
display: block;
width: auto;
height: auto;
margin: 5px;
}
HTML
<section class="content_packet">
<h2 class="category_Heading">Category 1 </h2>
<div class="topic_Wrapper" >
<div class="topic_box_medium"> <P>MEDIUM BOX<P> </div>
<div class="topic_box_medium"> <P>MEDIUM BOX<P> </div>
<div class="topic_box_large"> <P>BIG BOX<P> </div>
<div class="topic_box_large"> <P>BIG BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
<div class="topic_box_mini"> <P>MINI BOX<P> </div>
</div>
<h2 class="category_Heading">Category 1 </h2>
<div class="topic_Wrapper" >
<div class="topic_box_large"> </div>
<div class="topic_box_large"></div>
<div class="topic_box_mini"></div>
<div class="topic_box_mini"> </div>
<div class="topic_box_normal"> </div>
<div class="topic_box_medium"></div>
<div class="topic_box_mini"></div>
<div class="topic_box_mini"> </div>
</div>
</section>

Answer 1

You can use more than one CSS class in your tags, Just add a space between them like so.
<div class="CSS-Class1 CSS-Class-2 CSS-Class-3">...</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* force scrollbar, prevents initial gap */
html {
overflow-y: scroll;
}
body {
font-family: sans-serif;
}
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .element-item ---- */
/* 5 columns, percentage width */
.grid-item,
.grid-sizer {
width: 20%;
}
.grid-item {
float: left;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 40%; }
.grid-item--height2 { height: 200px; }
HTML
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
The Masonry layout is the way to go as said in the comments, but because you want to have different widths you will have to use some java-script.
Here is a good site to look at. http://isotope.metafizzy.co/layout-modes/masonry.html
And a Codepen Example to see how it works. http://codepen.io/desandro/pen/sqrwo
Hope this helps

Answer 2

This post may help you.
Where you can calculate tallest div and set the same height for each div.