Is there a way of forcing floating div elements inside a div to occupy free space vertically using only css and html?

Question

In the following code snippet I am trying to make the third div element (the green one) to occupy the free space above it. I am looking for the most abstract solution. What I mean is that I am not looking for a solution with exactly three inner divs and two-column scenario. What is more, I dont want to use bootstrap or any other plugin.

.outer {
  background-color: yellow;
  width: 500px;
  height: 500px;
} 

.inner-1 {
  float: left; 
  background-color: red;
  align-self: start;
}

.inner-2 {
  float:left; 
  background-color: lightblue;
  align-self:start;
}

.inner-3 {
  float:left; 
  background-color:green;
  align-self:start;
}

.p-1 {
  width:200px;
  height:200px;
}

.p-2 {
  width:200px;
  height:250px;
}

.p-3 {
  width:200px;
  height:200px;
}

.inner-1::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-2::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-3::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<div class="outer">
  <div class="inner-1">
      <div class="p-1">one</div>
  </div>
  <div class="inner-2">
      <div class="p-2">two</div>
  </div> 
  <div class="inner-3">
    <div class="p-3">three</div>
  </div> 
</div>

Answer 1

This is usually called Masonry layout. There is currently no perfect way to do this with pure CSS for the general case. Although there are several techniques to achieve this for specific scenarios.

For example, you can use vertical columns if you don't want the block order to be strict.

.outer {
  background-color: yellow;
  width: 500px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
} 

.inner-1 {
  float: left; 
  background-color: red;
  align-self: start;
}

.inner-2 {
  float:left; 
  background-color: lightblue;
  align-self:start;
}

.inner-3 {
  float:left; 
  background-color:green;
  align-self:start;
}

.p-1 {
  width:200px;
  height:200px;
}

.p-2 {
  width:200px;
  height:250px;
}

.p-3 {
  width:200px;
  height:220px;
}

.inner-1::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-2::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.inner-3::after{
  content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<div class="outer">
  <div class="inner-1">
      <div class="p-1">one</div>
  </div>
  <div class="inner-2">
      <div class="p-2">two</div>
  </div> 
  <div class="inner-3">
    <div class="p-3">three</div>
  </div> 
</div>

There's a good article on this topic at CSS-tricks: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

Answer 2

You can always use Flexbox well I created an example for you take a look.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 200px; /* You can change it later */
  display: flex;
  padding: 1.25rem; /* just to show background-color "yellow" */
  background-color: yellow;
}

.inner {
  width: 100%;
  height: 100%:
}

#inner__one {
  background-color: red;
}

#inner__two {
  background-color: green;
}

#inner__three {
  background-color: lightblue;
}

<div class="outer">
  <!-- You can sepeare them by giving it ID -->
  <div class="inner" id="inner__one"></div>
  <div class="inner" id="inner__two"></div>
  <div class="inner" id="inner__three"></div>
</div>