Display 2 div in block and vertical div beside them - html

Question

I am trying to design a section which 3 image. I can get the two images to display by block easily. I can float the third image to the right and adjust the height easily. However my issue is it does not align side by side.Below is an example of what I am trying to achieve
This is an example of what I have so far
.image-one,
.image-two {
width: 250px;
background-color: green;
display: block;
margin-top: 10px;
}
.image-three {
float: right;
background-color: lightblue;
width: 250px;
height: 200px;
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>

Answer 1

You should be able to simple add flex to the container, and then add the content within a left and a right div.
Here's a working example:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.image-one,
.image-two {
width: 250px;
height: 95px;
background-color: green;
margin-bottom: 10px;
}
.image-three {
background-color: lightblue;
width: 240px;
height: 200px;
margin-left: 10px;
}
<div class="container">
<div class="left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="right">
<div class="image-three"> Image three </div>
</div>
</div>

Answer 2

You can use flexbox for this:
.container {
display: flex;
flex-direction: column; /* align items in columns */
flex-wrap: wrap; /* wrap to a new column when height is reached */
justify-content: space-between; /* add spacing in between top and bottom image */
height: 210px; /* height of your 2 images plus and spacing you want */
width: 510px; /* width of 2 columns plus any spacing */
}
.image-one,
.image-two {
width: 250px;
height: 100px;
background-color: green;
display: block;
}
.image-three {
background-color: lightblue;
width: 250px;
height: 210px; /* I would make this image the height of the other 2 plus spacing */
align-self:flex-end; /* align this to the right of the container */
}
<div class="container">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
<div class="image-three"> Image three </div>
</div>

Answer 3

Maybe you can add some internal divs like this:
<div class="container">
<div class="container-left">
<div class="image-one">Hello</div>
<div class="image-two">Image two</div>
</div>
<div class="container-right">
<div class="image-three"> Image three </div>
</div>
</div>
Then, add css to container-left and container-right to properly set the width and the float. Like this:
.container-left, .container-right{
width:250px;
float:left;
}

Answer 4

Why don't you make use of bootstrap columns?
HTML
<div class="container">
<div class="row main-row">
<div class="col-6 left-col">
<div class="row left-col-top">
<!-- Top left image here -->
</div>
<div class="row left-col-bottom">
<!-- Bottom left image here -->
</div>
</div>
<div class="col-6 right-col">
</div>
</div>
</div>
CSS
.main-row {
height:300px;
}
.left-col-top {
background-color:blue;
height:50%;
}
.left-col-bottom {
background-color:red;
height:50%;
}
.right-col {
background-color:green;
height:100%;
}

Answer 5

Easy flexbox solution :)
#main, #left {
display:flex;
}
#left {
flex-direction: column;
flex: 1;
}
.section {
flex: 1;
margin: 2px;
background-color: green;
}
<div id="main">
<div id="left">
<div class="section">Hello</div>
<div class="section">Hello</div>
</div>
<div id="right" class="section">Hello</div>
</div>