remove vertical empty space when div floating - html

Question

It is my fault, I am trying to re-ask the question.
I have some code like this:
<style>
div {
float: left; width: 150px; padding: 10px;
margin: 10px; color: #fff;
}
</style>
<div style="background: #c33">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #3c3;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #33c;">
c<br>c<br>c<br>c<br>c<br>c<br>c
</div>
<div style="background: #399;">
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
</div>
<div style="background: #939;">
e<br>e
</div>
<div style="background: #993;">
f<br>f<br>f<br>f<br>f
</div>
<!--
... and so on ...
-->
when my visitor's screen has enough width, it is works fine like this.
when the screen become smaller, it still works fine at beginning.
but good time doesn't last long, when continually shrink screen size, it displayed like this.
some space appeared between c(the blue one) and e(the purple one).
then a(the red one) and f(the yellow one).
when shrink to 2 columns, a c and e are totally separated.
So, my question is, every my block have certain(fixed) width, uncertain(fluid) height, there is no max-width of this "block area" or say "the parent node of these blocks" or container whatever.
Can I just remove these unnecessary spaces using pure css way?
Hope this time I explained clearly, and thank you for reading my post.

Answer 1

You might try to left float only two, and float right the other:
.aaa,
.bbb,
.ccc {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.bbb {
float: right;
}
.aaa,
.ccc {
float: left;
}
<div class="aaa" style="background: #933">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div class="bbb" style="background: #393">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div class="ccc" style="background: #339">
c<br>c<br>c<br>c<br>c<br>c
</div>

Answer 2

Grid, flex... and even simply using floats and clears:
<style>
div {
width: 200px; padding: 10px;
margin: 20px; color: #fff;
}
</style>
<div style="background: #933; float: left;">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393; float:right;">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339; clear:left;">
c<br>c<br>c<br>c<br>c<br>c
</div>

Answer 3

To some extent you can do that, if you use left AND right floats as shown below and put a wrapper around it to let the right-floated elements not go too far right:
div {
width: 200px;
padding: 10px;
margin: 20px;
color: #fff;
}
.a {
float: left;
}
.b {
float: right;
}
.wrapper {
width: 520px;)
<div class="wrapper">
<div style="background: #933" class="a">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</div>
<div style="background: #393" class="b">
b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br> b
<br>b<br>b<br>b<br>bbr>b<br>b<br>b<br>b<br>b
</div>
<div style="background: #339" class="a">
c<br>c<br>c<br>c<br>c<br>c
</div>
</div>

Answer 4

Like others have said, there are plenty ways of doing it, but I'd use flexbox.
Just wrap the two boxes on the left in a container div, and use display:flex on that container, and set the flex-direction property to column and they should stack on top of one another.
Here's a great website to pick up the basics - http://flexboxfroggy.com/

Answer 5

Oddly enough, the closest you could get is using damn CSS columns..
Yeah, that's right. I just said "CSS Columns"
Declaring an auto column layout using your divs width as column width, and making sure no div will wrap into multiple columns with break-inside: avoid; you can get pretty close.
body {
columns: 150px;
column-gap: 2em;
}
div {
break-inside: avoid;
}
https://jsfiddle.net/p0yLs5sh/1/
And yes, I know. I just said columns. Thought that would never be an answer.