CODEWITHSUNDEEP
csshtml
Tim C
Tim C

Reputation: 5714

HTML/CSS Best way to horizontally align elements inside a div

Im working on the followinig:

enter image description here

The content in the right section (yellow bg) needs to be "stacked" horizontally aligned inside the right section.

What is the best / easiest way to tackle this problem?

  1. Can I use divs with height percentage?
  2. Should I use margins, and negative margins?
  3. Should I create separate divs for each piece of content within the right section?

Any help, examples or resources, much appreciated

Upvotes: 2

Views: 141

Answers (1)

Asons
Asons

Reputation: 87303

Use flexbox

.outer {
  display: flex;
  flex-wrap: wrap;
}
.inner {
  padding: 20px 0;
  background: red;
  margin: 5px;
}

.inner.nr1,
.inner.nr2 {
  width: 80%;
}
.inner.nr3,
.inner.nr4,
.inner.nr5 {
  width: 25%;
}
<div class="outer">
  <div class="inner nr1">
  </div>
  <div class="inner nr2">
  </div>
  <div class="inner nr3">
  </div>
  <div class="inner nr4">
  </div>
  <div class="inner nr5">
  </div>
</div>

Upvotes: 2

Related Questions