Display 3 divs, 2 together and the third one under the first

Question

Well, I want to display 3 divs like this:

[ DIV 1 ] [       ]
[       ] [ DIV 2 ]
[ DIV 3 ] [       ]

But, for some reason this happens:

[ DIV 1 ] [       ]
[       ] [ DIV 2 ]
          [       ]
[ DIV 3 ]

There is a JSFiddle showing what I mean: https://jsfiddle.net/4mmdamak/

And there is a possible solution using position relative and negative margin top: https://jsfiddle.net/4mmdamak/1/

I don't want to use margin tops because I don't know the height of the second div, so, I don't know how many pixels I have to rise the third div.

Also, I tried using vertical-align: top; on the third div, but this is useless.

PD: I can't put the third div inside the first div.

PD2: Also, I can't create an table with two td tags with rowspan 2.

So, if you have any other solution... Thanks!

and one more note.. the display inline blocks add a margin of 4px to its left.. So whenever using display:inline-block, give font-size:0 to the parent div..it will take care of the extra margin added.. — Anirudh Modi, Dec 27 '15 at 14:03

score 6 · Accepted Answer · answered Dec 27 '15 at 14:00

You can do this with Flexbox

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  color: white;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.div-1 {
  background: red;
  flex: 4;
}

.div-2 {
  background: blue;
  flex: 1;
}

.right {
  background: green;
  flex: 1;
}

<div class="content">
  <div class="left">
    <div class="div-1">DIv 1</div>
    <div class="div-2">Div 2</div>
  </div>
  
  <div class="right">Div 3</div>
</div>

score 0 · Answer 2 · answered Dec 27 '15 at 14:27

you need to add a wrapper div to the left hand side like so

<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
        <div id = 'left_container'>
            <div id = 'one'> Left Upper</div>
            <div id = 'two'>Left Lower</div>
        </div> <!-- end left -->
        <div id = 'right_column'>Right</div>
    </body>
</html>

and css as follows

body{
    height:700px;
}
#left_container{
    width: 65%;
    height:700px;
    background-color:black;
    float:left;
}
#one{
    width:100%;
    height:70%;
    background-color:blue;
    float:left;
}

#two{
    width:100%;
    height:30%;
    background-color:green;
    float:left;
}
#right_column{
    width:35%;
    height:100%;
    background-color:red;
    float:left;
}

I said before that I can't not put together the first and the third div. — z3nth10n, Dec 27 '15 at 21:47

score 0 · Answer 3 · answered Dec 27 '15 at 14:36

0

you can use float in styles, but:
width of container is 140px and width of every inside div is 64px
64 + 64 = 128 and 140 - 128 = 12, if width of container is 128px float will works!
jsfiddle

answered Dec 27 '15 at 14:36

Igor Ivancha

3,413
4
30
39

Display 3 divs, 2 together and the third one under the first

3 Answers3