Issue
Okay so I want to put 2 vertical containers in horizontal line with other 2 containers in css and want to make it responsive.
This is a visual example what I want to do:
Can somebody put an example how to solve this problem?
Solution
An example using flex.
.top,
.bottom,
.middle,
.right {
background-color: #3a3b3c;
border-radius: 5px;
}
.wrapper {
display: flex;
}
.left {
display: flex;
flex-direction: column;
}
.top {
height: 200px;
}
.bottom {
height: 100px;
margin-top: 10px;
}
.left,
.middle,
.right {
width: calc(100%/3);
margin: 0 10px;
}<div class="wrapper">
<div class="left">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>Answered By – Kameron
Answer Checked By – Cary Denson (AngularFixing Admin)