Floating divs on a new line not acquiring the whole space

Question

I have this example where I want the last div to shift up to fill the space that is left above it:

*{
  box-sizing: border-box;
}
.container{ 
  width: 600px;
border: 2px solid red;
height: 100%;
 
}
.container::after{
  content: "";
    clear: both; 
  display: table;
}
.child{
  width: calc(50% - 4px);
  border: 2px solid black;
  float: left;
}

<div class="container">
  
<div class="child">
  Hello
  <br/>hello
  <br/>hello
  <br/>hello
  <br/>hello
</div>
<div class="child"> <br/>hello
  <br/>hello
  <br/>hello</div>
<div class="child"> <br/>hello
  <br/>hello
  <br/>hello</div>
<div class="child"> 
  <br/>How can I make this shift up in the white space that is available above?
  <br/>
  <br/>
  </div>
  
</div>

In the bottom left div, there is white space at the top I would like to shift the div up to it, How can I do this? Thank you.

score 1 · Accepted Answer · answered Nov 14 '20 at 11:19

The last element won't 'pop up' to fill the void above it in this scenario.

Rather than using floating divs, why not use a flexbox? By making the .container display as using flex, and causing it to wrap the flex items, it will automatically fill the space as you want.

The snippet below illustrates:

*{
  box-sizing: border-box;
}
.container{ 
  width: 600px;
  border: 2px solid red;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.container::after{
  content: "";
  clear: both; 
  display: table;
}
.child{
  width: 50%;
  border: 2px solid black;
}

<div class="container">
  
<div class="child">
  Hello
  <br/>hello
  <br/>hello
  <br/>hello
  <br/>hello
</div>
<div class="child"> <br/>hello
  <br/>hello
  <br/>hello</div>
<div class="child"> <br/>hello
  <br/>hello
  <br/>hello</div>
<div class="child"> 
  <br/>How can I make this shift up in the white space that is available above?
  <br/>
  <br/>
  </div>
  
</div>

score 0 · Answer 2 · answered Nov 14 '20 at 11:30

Best way to deal with this kind of stuff is just simply use grid

.container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  height: 300px;
  width: 450px;
  border: 1px solid red;
   grid-gap: 10px;
}
.child {
  border: 1px solid black;
}

<div class="container">
  <div class="child">Hello <br>
hello <br>
hello <br>
hello <br>
hello</div>
  <div class="child"> 
    <br>
    hello <br>
hello <br>
hello 
  </div>
  <div class="child">
    Just saying that <br>
    grid's <br>
    the <br>
    best
  </div>
  <div class="child"></div>
</div>

Let me know if it doesn't work for you.

score 0 · Answer 3 · answered Nov 14 '20 at 11:43

Your expected outcome is what masonry exactly did. Masonry is a plugin for frondend development.

First you need to include jquery and masonry.js. This is must

<style>
  .grid-item {
  float: left;
  width: calc(50% - 4px);
  border: 2px solid hsla(0, 0%, 0%, 0.5);
  background: red;
  }
</style>
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"> 
</script>

Then your html code is here.

<div class="grid">
        <div class="child grid-item">
            Hello
            <br/>hello
            <br/>hello
            <br/>hello
            <br/>hello
        </div>
        <div class="child grid-item"> <br/>hello
            <br/>hello
            <br/>hello
        </div>
        <div class="child grid-item"> <br/>hello
            <br/>hello
            <br/>hello
        </div>
        <div class="child grid-item">
            <br/>How can I make this shift up in the white space that is available above?
            <br/>
            <br/>
        </div>
    </div>

At the end of html code you need to call masonry function

        <script type="text/javascript">
        $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        });
    </script>

Here is the whole picture of the code.

<body>
    <div class="grid">
        <div class="child grid-item">
            Hello
            <br/>hello
            <br/>hello
            <br/>hello
            <br/>hello
        </div>
        <div class="child grid-item"> <br/>hello
            <br/>hello
            <br/>hello
        </div>
        <div class="child grid-item"> <br/>hello
            <br/>hello
            <br/>hello
        </div>
        <div class="child grid-item">
            <br/>How can I make this shift up in the white space that is available above?
            <br/>
            <br/>
        </div>
    </div>
    <script type="text/javascript">
        $('.grid').masonry({
        // options
        itemSelector: '.grid-item',
        });
    </script>
</body>

Here is the fiddle

Floating divs on a new line not acquiring the whole space

3 Answers3

Linked