Div stacking in responsive design [duplicate] - html

Question

This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 5 years ago.
I am creating a responsive dashboard with a fixed header and sidebar nav. I am trying to create the template depicted below but am having issues with div stacking:
Instead, I can only get them to stack like in this image here:
I have a wrapper around the divs that has the following styles:
width: 100%;
padding: 15px;
The divs themselves are wrapped in a container with the following styles:
display: inline-block;
width: 50%;
padding: 15px;
float: left;
vertical-align: top;
Apparently, vertical-align: top is supposed to solve this issue but I haven't been able to get the yellow div to the right position.
Any ideas?

Answer 1

.wrapper{
width: 100%;
padding: 15px;
height:100%;
}
.floating_div{
margin:10px;
float:left;
width: 45%;
height:300px;
display:inline-block;
vertical-align:top;
}
.m-t{
margin-top:15px;
}
.blue_bg{
background:blue;
}
.green_bg{
background:green;
}
.yellow_bg{
background:yellow;
}
.floating_div .inner_div{
height:150px;
}
<div class="wrapper">
<div class="floating_div">
<div class="inner_div blue_bg">Inner Div 1</div>
<div class="inner_div yellow_bg m-t"> Inner DIv 2</div>
</div>
<div class="floating_div green_bg ">
Left Div 2
</div>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.

Answer 2

This should do it for you:
https://jsfiddle.net/hncuyy6o/1/
`<div class="wrapper">
<div class="hai">
<div class="one"></div>
<div class="three"></div>
</div>
<div class="two"></div>
</div>`
CSS:
.wrapper{
width: 100%;
padding: 15px;
}
.hai{
display: inline-block;
}
.one{
vertical-align: top;
width: 200px;
height: 300px;
background-color: blue;
display: inline-block;
}
.two{
vertical-align: top;
width: 200px;
height: 400px;
background-color: red;
display: inline-block;
}
.three{
width: 200px;
height: 300px;
background-color: yellow;
display: block;
position: absolute;
}
Hope that helps.

Answer 3

You can Javascript Masonry Grid Layout to achieve that.
Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
Using Masonry Library, its simple as this.
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
Jquery:
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});

Answer 4

Simplest way to achieve that is wrapping yellow and blue box with another div.
It works unless You have media queries changing layout much. Another thing is to use flexbox with colums.