S.A.Th. S.A.Th. - 5 months ago 17
CSS Question

Align 2 divs on top of each other and to the right

What I need to do is a bit complicated to explain, but I'll do my best. I need to fit 3 different divs in one page, but my left div needs to have more space than the others, so aligning side by side is impractical, as is one on top of each other. I need one bigger div on the left, and the other two stacked on top of each other on the right. But I can't merge these two divs into one and float it. Because I need the top one to be vertically aligned on top of the left one, and the bottom one vertically aligned on bottom of the left one, while these 2 (top and bottom) need to be aligned on their right. Not sure if I was able to explain, so here is an image illustrating what I want to accomplish:

enter image description here

So, you see, left one taking most of the space, smaller ones aligned on top and bottom, while also aligned on their right side, and a blank space between then. Here's the code I already have:



<div style="display: inline-block;">
<h3>Left Div</h3>
<input type="text" name="name">
<input class="button" type="submit">
</div>

<div style="display: inline-block; vertical-align: top; width: auto; padding-left: 20px">
<h3>Top right div</h3>
<input type="text" name="name2">
</div>

<div style="display: inline-block; vertical-align: bottom; width: auto; padding-left: 20px;">
<h3>Bottom right div</h3>
<input type="text" name="name3">
<input class="button" type="button" onclick="window.location.replace('url')" value="Cancel">
</div>





I'd also like to say that in the middle of the way (when I only had 2 divs) it was working the way I wanted to, the problem arose when I added the third div, so I think that's where the problem is at. Please note that I'm new to html, I'm sorry if this is just a simple fix.

Answer

I think the key is the equal height part, which you can use CSS3 flexbox to solve it. For the right side top / bottom divs, you can wrap the two divs into another div. See the simple demo below.

jsFiddle

div {
  border: 1px solid aqua;
}
.container {
  display: flex;
}
.left, .right {
  flex: 1;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
<div class="container">
  <div class="left">
    <h3>Left Div</h3>
    <br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="right">
    <div>
      <h3>Top right div</h3>
    </div>
    <div>
      <h3>Bottom right div</h3>
    </div>
  </div>
</div>

Comments