CODEWITHSUNDEEP
htmlcss
Madamadam
Madamadam

Reputation: 938

Centering children vertically while filling full height of parent div

I would like to accomplish this layout in HTML/CSS:

enter image description here (short text)

and it should work for longer texts as well: enter image description here (long text)

So the orange element as well as the white element should be vertically centered and the background color of both should fill the full height of the parent. This should be the case for long and for short texts.

Here's my code so far – but as you can see, using margin:auto doesn't work well because the background color doesn't reach to top and bottom of the parent:

.exercise {
  border: 1px solid black;
  border-radius: 0.5em;
  display: flex;
  background: orange;
  border-radius: 0.5em 0 0 0.5em;
  position: relative;
}

.number {
  font-family: Arial, Helvetica, sans-serif;
  padding: 1em;
  text-align: center;
  margin: auto;
}

.number span:nth-of-type(1) {}

.number span:nth-of-type(2) {
  font-size: 5em;
  font-weight: bold;
}

.text {
  margin: auto;
  padding: 1em;
  background: yellow;
}
<div class="exercise">
  <div class="number">
    <span>Aufgabe</span>
    <span>5</span>
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>


<div class="exercise" style="margin-top: 1em">
  <div class="number">
    <span>Aufgabe</span>
    <span>5</span>
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  </div>
</div>

Upvotes: 0

Views: 23

Answers (1)

Colin Chadwick
Colin Chadwick

Reputation: 146

Use height: auto and display: flex.

.exercise {
  border: 1px solid black;
  border-radius: 0.5em;
  display: flex;
  background: orange;
  border-radius: 0.5em 0 0 0.5em;
  position: relative;
}

.number {
  font-family: Arial, Helvetica, sans-serif;
  padding: 1em;
  text-align: center;
  margin: auto;
}

.number span:nth-of-type(1) {}

.number span:nth-of-type(2) {
  font-size: 5em;
  font-weight: bold;
}

.text {
  height: auto;
  display: flex;
  align-items: center;
  padding: 1em;
  background: yellow;
}
<div class="exercise">
  <div class="number">
    <span>Aufgabe</span>
    <span>5</span>
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>


<div class="exercise" style="margin-top: 1em">
  <div class="number">
    <span>Aufgabe</span>
    <span>5</span>
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
  </div>
</div>

Upvotes: 1

Related Questions