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>

So many different ways to achieve this. you don't need to declare display block on a div. Unless you are overwriting something — Huangism, Aug 19 '16 at 18:36

score 10 · Answer 1 · edited May 23 '17 at 12:00

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:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
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.

Cave Johnson · Accepted Answer · 2019-03-16T16:46:34.067

6

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>

edited Mar 16 '19 at 16:46

answered Aug 19 '16 at 18:46

Cave Johnson

6,499
5
38
57

Thanks! That did the job! I see how it does the thing now :) – Micard Aug 19 '16 at 19:00

score 4 · Answer 3 · answered Aug 19 '16 at 18:44

4

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

answered Aug 19 '16 at 18:44

H. Jabi

171
3
12

nmg49 · Answer 4 · 2016-08-19T20:18:17.537

4

I would highly recommend using Bootstrap Grid.

Something like this:

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">DIV 1</div>
      <div class="row">DIV 2</div>
    </div>
    <div class="col-md-4>DIV 3</div>
  </div>
</div>

edited Aug 19 '16 at 20:18

answered Aug 19 '16 at 18:48

nmg49

1,356
1
11
28

score 2 · Answer 5 · answered Aug 19 '16 at 18:39

2

You can accomplish this with twitter's bootstrap. Link to the bootstrap online:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Then you can use the below code to accomplish that:

<div class="row">

    <div class="col-lg-8">           
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="col-lg-4"></div>

 </div>

answered Aug 19 '16 at 18:39

Derick Alangi

1,080
1
11
31

Thanks for the reply! I am using bootstrap but I have my other styles setup that two together on that part become really wonky... – Micard Aug 19 '16 at 19:01

score 1 · Answer 6 · answered Aug 19 '16 at 18:55

Try this one:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #one img, #two img{width: 300px;
                        height: 300px;}

        #three img{height: 600px;
                width: 600px;}

        div#onetwo, div#three{display: inline-block;}

    </style>

</head>
<body>

    <div id="onetwo">
        <div id="one"><img src="image1.jpg" alt=""></div>
        <div id="two"><img src="image2.jpg" alt=""></div>

     </div>

     <div id="three"><img src="image3.png" alt=""></div>
</body>
</html>

or use bootstrap

score 0 · Answer 7 · answered Dec 14 '19 at 13:23

This can also be achieved using pure CSS with CSS Grid.

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<main>
  <div class="col-1">
    <div class="row-1">
      row 1
    </div>
    <div class="row-2">
      row 2
    </div>
  </div> 
  <div class="col-2">
    column 2
  </div>
</main>

The benefit I find of using CSS grid is that it takes very few CSS rules if your HTML is defined well.

CSS Tricks has an in-depth Guide to CSS Grid which includes browser support information (now implemented in most modern browsers).

Layout of 3 DIVs, where 2 are in one column

7 Answers7