Layout of 3 DIVs, where 2 are in one column

Question

I am trying to make something like this:

|--------------------------------------------------------|-------------|
|                                                        |             |
|                    DIV 1                               |             |
|                                                        |    DIV 3    |
|--------------------------------------------------------|             |
|                    DIV 2                               |             |
|--------------------------------------------------------|-------------|

I can't use a table for this. And I don't know if there's a way to just let them stack like that?

I tried it with the code below, but DIV 3 is not all the way at the top. It is actually exactly div2.height lower from the top.

#DIV_1 {
  height: 125px;
  width: 80%;
  display: block;
  float: left;
}
#DIV_2 {
  width: 80%;
  height: 15px;
  display: block;
}
#DIV_3 {
  display: block;
  float: left;
  height: 140px;
  width: 20%;
}

<div class="row" style="width: 1024px; height: 140px;">
  <div>
    <div id="DIV_1"></div>
    <div id="DIV_2"></div>
  </div>
  <div id="DIV_3">
  </div>
</div>

Answer 1

The layout is relatively simple with CSS flexbox:

.row {
    display: flex;                 /* establish flex container */
    height: 140px;                 /* height from original code */
    width: 1024px;                 /* width from original code */
}

.row > div:first-child {
    flex: 0 0 80%;                 /* width from original code */
    display: flex;
    flex-direction: column;        /* stack first div children vertically */
}

.row > div:first-child > div {
    flex: 1;                       /* items in first div distribute space equally */
    border: 1px dashed black; 
}

.row > div:last-child {
  flex: 0 0 20%;
  border: 1px dashed black;
}

<div class="row">
    <div>
        <div id="DIV_1">DIV #1</div>
        <div id="DIV_2">DIV #2</div>
    </div>
    <div id="DIV_3">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.

---

Browser support:

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