2

I've got divs of equal widths but variable heights, however the divs in the code below have vertical white space between them (div49 in particular), how can I get the divs to align at the top of the page and fill in underneath each other vertically as well as horizontally (basically removing as much white space as possible between divs)?

Looking for a pure CSS solution if one exists?

.boxx {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 60px;  
    position: relative;
    overflow: hidden;
    display: inline-block;
/*    float: left;*/
}
.boxx2 {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 120px;  
    position: relative;
    overflow: hidden;
        display: inline-block;
/*    float: left;*/
}
<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div>
<div class="boxx"  data-sort='49'>div49</div>
<div class="boxx2"  data-sort='1.1'>div1.1</div>
<div  class="boxx" data-sort='2'>div2</div>
<div class="boxx"  data-sort='1'>div1</div>
<div class="boxx"  data-sort='3'>div3</div>
<div class="boxx"  data-sort='99'>div99</div>
<div class="boxx"  data-sort='88'>div88</div>
<div class="boxx"  data-sort='77'>div77</div>

Easier to explain with a before/after pic: css whitespace

BA TabNabber
  • 1,296
  • 2
  • 14
  • 18

5 Answers5

4

Remove the linebreaks in your HTML code:

.boxx {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 60px;  
    position: relative;
    overflow: hidden;
    display: inline-block;
/*    float: left;*/
}
.boxx2 {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 120px;  
    position: relative;
    overflow: hidden;
        display: inline-block;
/*    float: left;*/
}
<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div><div class="boxx"  data-sort='49'>div49</div><div class="boxx2"  data-sort='1.1'>div1.1</div><div  class="boxx" data-sort='2'>div2</div><div class="boxx"  data-sort='1'>div1</div><div class="boxx"  data-sort='3'>div3</div><div class="boxx"  data-sort='99'>div99</div><div class="boxx"  data-sort='88'>div88</div><div class="boxx"  data-sort='77'>div77</div>
</div>

Read this article for explanation and other solutions.

Andy Tschiersch
  • 3,716
  • 1
  • 17
  • 24
  • This gets the divs slightly closer but still leaves large areas of white space, please see the updated image which better explain the problem – BA TabNabber Oct 07 '16 at 05:56
  • I'm afraid there is no pure CSS solution for (but I am not sure). Maybe is [masonry](http://masonry.desandro.com/) good for this. – Andy Tschiersch Oct 07 '16 at 06:11
  • @AndyTschiersch you are wrong, there are CSS solutions) See my answer. – Narek-T Oct 07 '16 at 06:33
2

There is solutions.

  1. Use flexbox.

.grid { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap;
  height: 100vw;
  max-height: 800px;
}
img {  
  width: 33.3%;
  margin: 5px;
} 
<div class="grid">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x250">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/350x450">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x250">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/350x450">

</div>
  1. Use CSS multiple column layout

.grid {
    column-count: 4;
    column-gap: 1em;
}

img {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
<div class="grid">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x250">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/350x450">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x250">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/350x450">
</div>

You can also check browser compatibility for flexbox and for column layout

Narek-T
  • 1,898
  • 10
  • 20
0

Try this..it may work

Give font-size: 0; to the parent element, because if you use display: inline-block; by default it will create an text-node, so it will show an empty space. To remove that we need to use font-size: 0; to the parent element.

Venu Madhav
  • 413
  • 1
  • 5
  • 14
0

Just add negative margin to you boxx and boxx2 classes.

.boxx, boxx2{
margin: -2px
}
andre mcgruder
  • 1,120
  • 1
  • 9
  • 12
0

have you tried with floats. try this, may be this will help u

.boxx {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 60px;  
    position: relative;
    overflow: hidden;
    display: inline-block;
    float: left;
}
.boxx2 {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 120px;  
    position: relative;
    overflow: hidden;
     
  float: left;
}
<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div>
<div class="boxx"  data-sort='49'>div49</div>
  <div style="clear:both;"></div>
<div class="boxx2"  data-sort='1.1'>div1.1</div>
<div  class="boxx" data-sort='2'>div2</div>
    <div style="clear:both;"></div>
<div class="boxx"  data-sort='1'>div1</div>
<div class="boxx"  data-sort='3'>div3</div>
    <div style="clear:both;"></div>
<div class="boxx"  data-sort='99'>div99</div>
<div class="boxx"  data-sort='88'>div88</div>
    <div style="clear:both;"></div>
<div class="boxx"  data-sort='77'>div77</div>
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26