0

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

enter image description here

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.

Storm Parker
  • 583
  • 3
  • 7
  • 21

2 Answers2

0

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.

gabrielchl
  • 606
  • 9
  • 20
0

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>
Caio Kawasaki
  • 2,894
  • 6
  • 33
  • 69