How can I align a big div next to three stacked divs? - css

Question

Three small divs, stacked upon each other, with a big three-small-divs-high div on their right side. How do I do this? Does Bootstrap have anything prepared for it?

Answer 1

You don't need to use any framework, you can do this with Flexbox.
.content {
display: flex;
}
.left {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
padding-bottom: 50px;
}
.right {
flex: 3;
background: #22B14C;
}
.box:nth-child(1) {background: #ED1C24;}
.box:nth-child(2) {background: #00A2E8;}
.box:nth-child(3) {background: #FFAEC9;}
<div class="content">
<div class="left">
<div class="box">Small DIv</div>
<div class="box">Small DIv</div>
<div class="box">Small DIv</div>
</div>
<div class="right">Big div</div>
</div>

Answer 2

This should do it:
#left, #right {
float: left;
font-weight: bold;
font-family: Calibri, sans-serif;
font-size: 20px;
}
#left .small {
display: block;
width: 200px;
height: 55px;
padding: 12px;
box-sizing: border-box;
}
#right {
display: block;
width: 400px;
height: 165px;
padding: 20px;
box-sizing: border-box;
font-size: 60px;
}
<div id="left">
<div class="small" style="color: #22B14C; background-color: #ED1C24">Small div</div>
<div class="small" style="color: #FFAEC9; background-color: #00A2E8">Small div</div>
<div class="small" style="color: #ED1C24; background-color: #FFAEC9">Small div</div>
</div>
<div id="right" style="color: #0099DB; background-color: #22B14C">Big div</div>
If you want that it has a width of 100%, use
#right {
/* ... */
width: calc(100% - 200px);
}