Layout of 3 DIVs, where 2 are in one column

Try this. I removed float and width from DIV_1 and DIV_2 and put it on the parent.

#DIV_0 {
  width: 80%;
  float: left;
}

#DIV_1 {
  height: 125px;
}

#DIV_2 {
  height: 15px;
}

#DIV_3 {
  float: left;
  height: 140px;
  width: 20%;
}
<div class="row" style="width: 1024px; height: 140px;">

  <div id="DIV_0">
    <div id="DIV_1">div1</div>
    <div id="DIV_2">div2</div>
  </div>

  <div id="DIV_3">
    div3
  </div>

</div>

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.


Do not use floating with #DIV_1. Instead use float: left, width: 80% with the parent of #DIV_1.

Tags:

Html

Css

Recent Posts