How to arrange 3 divs: div 1 and 2 stacked in left column, and div 3 is right column

Question

I've got three div's that I'd like to arrange like this

My code should look like this :

<div class="container">
    <div class="div1">Div #1</div>
    <div class="div2">Div #2</div>
    <div class="div3">Div #3</div>    
</div>

So - what should my css / html be if at all possible to do?

Answer 1

.container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* align children (flex items) vertically */
    flex-wrap: wrap;
    height: 120px;
}

.container > div {
    flex: 1 0 50px;            /* occupy free space, don't shrink, initial height */
    width: calc(50% - 10px);   /* half container size less margins */
    margin: 5px;
    box-sizing: border-box;
    border: 1px solid black;
}

<div class="container">
    <div class="div1">Div #1</div>
    <div class="div2">Div #2</div>
    <div class="div3">Div #3</div>
</div>

---

Benefits of flexbox:

1. minimal code; very efficient
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. it's responsive
6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

---

To learn more about flexbox visit:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube video tutorial

---

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

Answer 2

<style type="text/css">
.main{
    height:500px;
    width:400px;
}
div.subDiv{
    height:50%;
    margin:5px;
}
div.subDiv>div{
    width:47%;
    height:100%;
    display:inline-block;
}
div.subDiv>div>div{
    height: 122.5px;
    background-color:gray;
}
div.subDiv>div>div+div{
    margin-top:5px
}
.gray{
    background-color:gray;
}
</style>
<div class="main">
    <div class="subDiv">
        <div>
            <div></div>
            <div></div>
        </div>
        <div class="gray"></div>
    </div>
</div>

Try this.

Answer 3

To achieve your expected result, use following option

.container {
  height: 100px;
}

.div1 {
  float: left;
  postion: absolute;
  width: 20%;
  border: 1px solid black;
  height: 50%;
}

.div2 {
  float: left;
  clear: both;
  vertical-align: bottom;
  width: 20%;
  border: 1px solid black;
  height: 50%;
}

.div3 {
  display: inline-block;
  width: 20%;
  height: 100%;
  border: 1px solid black;
}

http://codepen.io/nagasai/pen/KMWgEz