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

Html – Align div elements side by side

I need the two elements to be side by side, but even when they are in grid they still don’t get in place.
Yes, I tried inline-block, float and padding. None of them worked.
I supossed it could be something with the grid, but so far I didn’t work as well.
This is my code:
(I cropped the css as the confg are essentially the same)

body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  border: 10px blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 10px;
}

.bg {
  background-color: blueviolet;
  grid-area: 1 / 1 / 13 / 5;
}

.header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: blue;
  grid-area: 1 / 1 / 2 / 5;
}

.footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: black;
  grid-area: 12 / 1 / 13 / 5;
}

.contentL1-C1 {
  margin: 5px;
  padding: 0px;
  width: 50%;
  height: auto;
  background-color: green;
  grid-area: 2 / 1 / 4 / 3;
}

.contentL1-C2 {
  margin: 5px;
  padding: 0px;
  width: 50%;
  height: auto;
  background-color: greenyellow;
  grid-area: 2 / 3 / 4 / 5;
}
<div class="grid">
  <div class="bg">
    <div class="header">
      heyy
    </div>
    <div class="contentL1-C1">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL1-C2">
      <img src="congee.png" alt="congee" width="50%" height="50%" />
    </div>
    <div class="contentL2">
      <div class="contentL2-title">
        title
      </div>
      <div class="contentL2-C1card">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2-C2card">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2-C3card">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2-C4card">
        card4
      </div>
      hey
    </div>
    <div class="contentL3">
      hey
    </div>
    <div class="footer">
      hey
    </div>
  </div>
</div>

This is what it looks like on the browser

Tags:

2

Answers


  1. 0

    I edited a few things that might fit the needs you’re looking for.

    body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  border: 10px blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 5px; /* Use grid-gap to define both row and column gaps */
}

.bg {
  background-color: blueviolet;
  grid-area: 1 / 1 / 13 / 5;
}

.header {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: blue;
  grid-area: 1 / 1 / 2 / 5;
}

.footer {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  background-color: black;
  grid-area: 12 / 1 / 13 / 5;
}

.contentL1-C1 {
  margin: 5px;
  padding: 0px;
  width: 100%; /* Set width to 100% to fill the available space in the grid cell */
  height: auto;
  background-color: green;
  grid-area: 2 / 1 / 4 / 3;
}

.contentL1-C2 {
  margin: 5px;
  padding: 0px;
  width: 100%; /* Set width to 100% to fill the available space in the grid cell */
  height: auto;
  background-color: greenyellow;
  grid-area: 2 / 3 / 4 / 5;
}


      <div class="grid">
    <div class="bg">
      <div class="header">
        heyy
      </div>
      <div class="contentL1-C1">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL1-C2">
        <img src="congee.png" alt="congee" width="50%" height="50%" />
      </div>
      <div class="contentL2">
        <div class="contentL2-title">
          title
        </div>
        <div class="contentL2-C1card">
          <img src="congee.png" alt="congee" width="50%" height="50%" />
        </div>
        <div class="contentL2-C2card">
          <img src="congee.png" alt="congee" width="50%" height="50%" />
        </div>
        <div class="contentL2-C3card">
          <img src="congee.png" alt="congee" width="50%" height="50%" />
        </div>
        <div class="contentL2-C4card">
          card4
        </div>
        hey
      </div>
      <div class="contentL3">
        hey
      </div>
      <div class="footer">
        hey
      </div>
    </div>
  </div>

    let me know if this is what you were looking for

    Login or Signup to reply.
  2. 0

    The div.grid has only one child element i.e. div.bg. Try structuring it like this:

    <div class="grid">
    <div>First</div>
    <div>Second</div>
</div>

    In this example div.grid has two child elements and would be side by side when display of grid would be applied to the parent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search