CODEWITHSUNDEEP
htmlcss
bob jomes
bob jomes

Reputation: 281

Put one div next to two vertical divs

I'm trying to have one div, with a height of 100% in it's container (which has a height of 50%) and two divs next to that, which each have a height of 50%.

Here's an example of what I mean:

enter image description here

I would also like to have a margin between all the divs, as shown in the picture above.

Here's my code so far:

 <div style="height: 50%;">
    
<div style="height: 100%; float: left; margin-right: 15px;">
<p>Content</p>
</div>
    
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
    
<div style="float: right; height: 50%;">
<p>Content</p>
</div>
    
</div>

JsFiddle: https://jsfiddle.net/ne4njtvr/

Upvotes: 3

Views: 961

Answers (1)

Asons
Asons

Reputation: 87191

Like this maybe?

Note, if you need to support older browsers, this can be done using display: table as well

html, body {
  margin: 0;
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.wrapper .left,
.wrapper .right  {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wrapper .right div  {
  flex: 1;
}
.wrapper .right div ~ div  {
  flex: 2;
}
div {
  border: 1px solid;
  box-sizing: border-box;
}
<div class="wrapper">
  <div class="left">
    Left
  </div>
  <div class="right">
    <div>
      Right - Top
    </div>
    <div>
      Right - Bottom
    </div>
  </div>
</div>

Upvotes: 4

Related Questions