CSS - Positioning of multiple adjacent divs to have one stack on top of each other between 2 divs

Question

I'm facing an issue where I need to make several adjacent div to position a certain way:

Their html layout positions are right next to each other:

<div class="parent">
    <div class="div1">....</div>
    <div class="div2">....</div>
    <div class="div3">....</div>
    <div class="div4">....</div>
</div>

I've tried with flex boxes and floating out Div1 and Div4 out but it's not working. I also need Div1 and Div4's height to all be vertically aligned to its correct dynamic height depending on the contents of Div2 and Div3.

Answer 1

CSS grid may help you solve it easily.

 .parent { display: grid; grid-gap: 10px; grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end]; grid-template-rows: [row1-start] auto [row2-start] auto [row2-end]; } .div1, .div2, .div3, .div4 { background-color: #444; color: #fff; padding: 20px; } .div1 { grid-column: col1-start; grid-row: row1-start / row2-end ; } .div2 { grid-column: col2-start ; grid-row: row1-start; } .div3 { grid-column: col2-start; grid-row: row2-start ; } .div4 { grid-column: col3-start ; grid-row: row1-start / row2-end ; } 

 <div class="parent"> <div class="div1">....</div> <div class="div2">....</div> <div class="div3">....</div> <div class="div4">....</div> </div> 

Some more examples could be found HERE .

Answer 2

Here is an idea with flexbox:

 * { box-sizing:border-box; } .parent { display:flex; height:200px; flex-direction:column; flex-wrap:wrap; } .div1,.div4 { height:100%; width:20%; border:1px solid green; } .div2,.div3 { height:50%; width:60%; border:1px solid red; } 

 <div class="parent"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="div4">4</div> </div> 

Answer 3

I would do it this way:

 *{ margin: 0; border: 0; padding: 0; box-sizing: border-box; } .parent{ display: flex; padding: 15px; } .a, .b{ background: #ddd; margin: 10px; flex-basis: 20%; } .container{ width: 60%; } .container div{ background: #ddd; margin: 10px; } 

 <div class="parent"> <div class="a">div1</div> <div class="container"> <div>div</div> <div>div</div> </div> <div class="b">div2</div> </div>