WKcho WKcho - 5 months ago 18
CSS Question

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

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

enter image description here

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

.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:


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.