Question 296531 in Html Question posted in
Some basic documentation can be found here.

Html – How can I position the second element in a series of four as a sidebar?

How can I place the divs in a specific place within the container without changing the HTML?

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

Here is a diagram of the layout I’m trying to achieve:

enter image description here

Tags:

2

Answers


  1. 0

    I add example code below.

    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.item1 {
  grid-column: 2;
  grid-row: 1;
}

.item2 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.item3 {
  grid-column: 2;
  grid-row: 2;
}

.item4 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
    <div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
    Login or Signup to reply.
  2. 0

    You can use CSS Grid to achieve this:

    .container {
  display: grid;
  grid-template-rows: 50% 50%; /* sets up 2 rows, equal height */
  grid-template-columns: 25% 50% 25%; /* sets the columns to equal 100% */
  grid-template-areas: "a b c" "a d c"; /* creates specific "areas" to assign the divs to */
}

.item1 {
  grid-area: b;
  background: red;
}

.item2 {
  grid-area: a;
  background: blue;
}

.item3 {
  grid-area: d;
  background: purple;
}

.item4 {
  grid-area: c;
  background: yellow;
}
    <div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

    Here’s a little less "fragile" version, to scale with content:

    .container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  /* sets ups two rows, each one will take the space it needs */
  grid-template-columns: 25% 1fr 25%;
  /* sets the columns to equal 100% */
}

.item1 {
  grid-column: 2;
  grid-row: 1;
  background: red;
}

.item2 {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: blue;
}

.item3 {
  grid-column: 2;
  grid-row: 2;
  background: purple;
}

.item4 {
  grid-column: 3;
  grid-row: 1 / span 2;
  background: yellow;
}
    <div class="container">
  <div class="item item1">Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

    If you need a gap in between elements:

    .container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  /* sets ups two rows, each one will take the space it needs */
  grid-template-columns: 25% 1fr 25%;
  /* sets the columns to equal 100% - the 1fr means 1 unit of remaining space. */
  gap: 10px;
  /* adds a gap between all elements. The 1fr for the column is important here as gap is ADDED to percentages, so the remaining width for the middle column is a little less than 50%  */
}

.item1 {
  grid-column: 2;
  grid-row: 1;
  background: red;
}

.item2 {
  grid-column: 1;
  grid-row: 1 / span 2;
  background: blue;
}

.item3 {
  grid-column: 2;
  grid-row: 2;
  background: purple;
}

.item4 {
  grid-column: 3;
  grid-row: 1 / span 2;
  background: yellow;
}
    <div class="container">
  <div class="item item1">Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search