CSS Floating Div Problems

Question

Floating problem The Small Div isn't filling on free space

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>

Please add the full code because your order in html markup is important — , Jun 30 '15 at 05:28
You are trying to achieve Masonary layout. Try using column-count. — m4n0, Jun 30 '15 at 05:33
Have you tried using a jquery plugin like "JQuery Nested", Shapeshift or Gridster — Padhraic, Jun 30 '15 at 05:38
@Padhraic can't use external js , css library ..its for a school assignment — Sajan, Jun 30 '15 at 07:50

score 4 · Answer 1 · answered Jun 30 '15 at 06:58

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

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

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

edited May 23 '17 at 10:30

Community

1
1

answered Jun 30 '15 at 05:44

DesignSnippet.com

308
2
12

Please avoid link-only answers. If part of the post really helps, copy the relevant bits over. If, however, as I suspect, this means this question is already answered, flag this one as a duplicate. – Mr Lister Jun 30 '15 at 06:06

CSS Floating Div Problems

2 Answers2