Stacking Boxes in HTML and CSS - html

Question

I wanted to create three boxes and align them properly. It would be two boxes in 1 row and a third box under the second box. The second and third box would have the height equal to the first box. You can visually see what I'm trying to do here: http://codepen.io/sibraza/pen/KMzwWR
Here is an example of what I'm trying to achieve:
Snippet:
.block {
float: left;
display: inline-block;
margin: auto;
width: 250px;
height: 200px;
border: 3px solid #73AD21;
padding: 10px;
margin-left: 300px;
margin-top: 200px;
}
.block2 {
float: left;
display: inline-block;
margin: auto;
width: 250px;
margin-top: 200px;
border: 3px solid #73AD21;
padding: 10px;
}
.block3 {
float: left;
margin: auto;
width: 250px;
height: 200px;
margin-top: 290px;
border: 3px solid #73AD21;
padding: 10px;
}
<div class="container-fluid">
<div class="row">
<div class="col-4-md text-center block">
<h2> Some Text </h2>
</div>
<div class="col-4-md text-center block2">
<h2> Other Text </h2>
</div>
<div class="col-4-md text-center block3">
<h2> More Text </h2>
</div>
</div>
</div>

Answer 1

Flexbox can do that with a wrapper for the right side divs
* {
box-sizing: border-box;
}
.row {
display: flex;
}
div {
border: 1px solid #73AD21;
}
.block {
height: 200px;
}
.row > div {
flex: 1;
}
.col-wrap {
display: flex;
flex-direction: column;
}
.col-wrap > div {
flex: 1;
}
<div class="container-fluid">
<div class="row">
<div class="col-4-md text-center block">
<h2> Some Text </h2>
</div>
<div class="col-wrap">
<div class="col-4-md text-center block2">
<h2> Other Text </h2>
</div>
<div class="col-4-md text-center block3">
<h2> More Text </h2>
</div>
</div>
</div>
</div>

Answer 2

Easiest way to sort this is to have the bigger div ont he let as is, and create a container Div for the two on the right. so the css would be somehting like this:
.block_on_the_left {
float:left;
width:50%;
}
#container_on_the_right {
float:left;
width:50%;
}
.block2 {
width:100%;
}
.block3 {
width:100%;
}
Your HTML would need to be:
<div class="block_on_the_left">
some stuff here for the left bit
</div>
<div id="container_on_the_right">
<div class=".block2">
some stuff
</div>
<div class=".block3">
some more stuff
</div>
</div>
The container will hold both the smaller divs inside it, and group them together.

Answer 3

Here is a simple solution using flex-box.
Hope this will help. Thanks :)
.row{
display: flex;
}
.block {
width: 250px;
height: 400px;
border: 3px solid red;
box-sizing: border-box;
}
.block2 {
width: 250px;
height: 200px;
border: 3px solid #73AD21;
box-sizing: border-box;
}
.block3 {
width: 250px;
height: 200px;
border: 3px solid blue;
box-sizing: border-box;
align-self: flex-end;
margin-left: -250px;
}
<div class="container-fluid">
<div class="row">
<div class="col-4-md text-center block">
<h2> Some Text </h2>
</div>
<div class="col-4-md text-center block2">
<h2> Other Text </h2>
</div>
<div class="col-4-md text-center block3">
<h2> More Text </h2>
</div>
</div>
</div>