I'm trying to have 4 divs: the first two are 25% width and 50% height, one with the other above it. The other div's are 25% width and 100% height, and then 50% width and 100% height respectively. I can't figure out how to line them all up side by side, because they bump each other down.
div {
background: green;
border: 1px solid white;
}
.box3{
display: inline-block;
width: 50%;
height:360px;
border: 1px solid rgba(255,255,255,0.3);
box-sizing: border-box;
}
.box2{
display: inline-block;
width: 25%;
height:360px;
border: 1px solid rgba(255,255,255,0.3);
box-sizing: border-box;
}
.box{
width: 25%;
height:180px;
border: 1px solid rgba(255,255,255,0.3);
box-sizing: border-box;
}
<div class="box"></div>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
Here's an image showing what I want.
This is so finnicky to work with, and when I put elements within the div's they also float around the page and do not stick in the actual div's, so I'm willing for entirely alternate solutions or frameworks that could make this easier as well.