This question already has an answer here:
Please look at the example below. I'm trying to put my yellow div under red div and on the left side of bottom half of green. If i use clear: left it will jump down, but it lefts empty space above. I want it to fill this space.
Here's example: https://jsfiddle.net/enqqr2w8/
#redyellow
{
width: 100px;
height: 200px;
float: left;
}
#red
{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#green
{
width: 100px;
height: 200px;
background-color: green;
float: left;
}
#blue
{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
#yellow
{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
body
{
width: 300px;
}<body>
<div id="redyellow">
<div id="red">
aa
</div>
<div id="yellow">
aa
</div>
</div>
<div id="green">
aa
</div>
<div id="blue">
aa
</div>
</body>Does this work for you?
EDIT: I have found a way to make dynamic columns with only CSS3:
div
{
width: 100px;
height: 100px;
break-inside: avoid-column;
}
#red {
background-color: red;
}
#green
{
height: 200px;
background-color: green;
}
#blue
{
background-color: blue;
}
#yellow
{
background-color: yellow;
}
#orange
{
background-color: orange;
}
#black
{
background-color: black;
}
body
{
width: 300px;
columns: 3;
}<body>
<div id="red"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="orange"></div>
</body>Sources: 1, 2, 3, 4
