is there a way to display this div next to the one before instead of below it?

Utame 0
Viewed 28

I've been trying to put the 3rd container in the free space on the right, like covering the whole height of 1st and 2nd container but fitting right in the free space of their width, and i haven't achieved it yet. Here is the code so maybe you could help me:

.container {
  background-color: rgb(181, 233, 138);
  height: 50vh;
  width: 50vw;
}

* {
  padding: 0;
  margin: 0;
}

.container2 {
  background-color: rgb(2, 159, 243);
  height: 50vh;
  width: 50vw;
}

.container3 {
  background-color: rgb(23, 223, 133);
  height: 100vh;
  width: 50vw;
}
<section id="only">
  <div class="only container"></div>
  <div class="only container2"></div>
  <div class="only container3"></div>
</section>

css
1 Answers

Use a proper CSS grid for the task:

* {
  padding: 0;
  margin: 0;
}

#only {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
}

.container {
  background-color: rgb(181, 233, 138);
  grid-column: 1;
}

.container2 {
  background-color: rgb(2, 159, 243);
  grid-column: 1;
  grid-row: 2;
}

.container3 {
  background-color: rgb(23, 223, 133);
  grid-column: 2;
  grid-row: 1 / 3;
}
<section id="only">
  <div class="only container"></div>
  <div class="only container2"></div>
  <div class="only container3"></div>
</section>

Find a complete guide to CSS grid here. MDN also has excellent information on CSS grid.

connexo0
Related