HTML and CSS Flexbox

Question

The following is the given HTML code and I am not allowed to alter it by any means

#exceriseHead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

body {
  color: gainsboro;
  text-align: center;
}

p {
  color: black
}

.exEnumeration {
  color: green;
}

#exceriseFooter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

.contentcolumnContent {
  display: flex;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>
  <link rel="stylesheet" href="cssaufgabe2.css">
  <!-- TODO: Import der CSS Datei -->

</head>

<body>

  <h1>Übungsblatt 4</h1>

  <div id="exceriseHead">
    Aufgabe 3
  </div>





  <div class="contentcolumnContent">
    <div class="exercisePart">

      <div class="exEnumeration">
        <h1>a.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>

    </div>

    <div class="exercisePart">

      <div class="exEnumeration">
        <h1>b.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
          fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>

    <div class="exercisePart">
      <div class="exEnumeration">
        <h1>c.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
  </div>







  <div id="exceriseFooter">
    [Gruppenbezeichnung]
  </div>

</body>

</html>

This is how it looks

This is how it should look like

I got an assignment to write a CSS sheet in order to make a given HTML page look like the image below. However I can't figure out, how to put the enumerations ( a.), b.)and c.)) in front of the text. I hope you can help me.

Please try to indent your code before you paste it, because it's really hard to read right now. — Wolfeur
– Wolfeur, Commented Nov 29, 2022 at 15:37
Does this answer your question? How to float 3 divs side by side using CSS? — Heretic Monkey
– Heretic Monkey, Commented Nov 29, 2022 at 15:41

Fabrizio Calderan · Accepted Answer · 2022-11-29 15:45:52Z

The work is almost done: for the .exercisePart elements you need to set flex-grow and flex-shrink to 1. display: flex and align-items: center so the letter and the text can be side by side

A small gap to the outer flexbox container may improve readability.

#exceriseHead {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

body {
  color: gainsboro;
  text-align: center;
}

p {
  color: black
}

.exEnumeration {
  color: green;
}

#exceriseFooter {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid black;
  background-color: greenyellow;
  text-align: center;
  color: black;
}

.contentcolumnContent {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.exercisePart {
  flex: 1 1 auto;
  display: flex;
  gap: .25rem;
  align-items: center;
 }

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Abgabeseite 3</title>
  <link rel="stylesheet" href="cssaufgabe2.css">
  <!-- TODO: Import der CSS Datei -->

</head>

<body>

  <h1>Übungsblatt 4</h1>

  <div id="exceriseHead">
    Aufgabe 3
  </div>





  <div class="contentcolumnContent">
    <div class="exercisePart">

      <div class="exEnumeration">
        <h1>a.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>

    </div>

    <div class="exercisePart">

      <div class="exEnumeration">
        <h1>b.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. <span class="code">Nam ut lacinia<br> elit. </span> Fusce dictum lorem purus, a ullamcorper dolor<br> dictum eu. Proin a sapien ut mauris egestas
          fringilla eu eu<br> magna. Ut eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>

    <div class="exercisePart">
      <div class="exEnumeration">
        <h1>c.)</h1>
      </div>
      <div>
        <!-- TODO: Beispieltext durch Aufgabentext ersetzen -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Aenean pellentesque aliquet imperdiet. Nam ut lacinia elit.<br> Fusce dictum lorem purus, a ullamcorper dolor dictum eu.<br> Proin a sapien ut mauris egestas fringilla eu eu magna. Ut<br>          eu imperdiet leo, vel ultrices quam.</p>
      </div>
    </div>
  </div>







  <div id="exceriseFooter">
    [Gruppenbezeichnung]
  </div>

</body>

</html>

Wolfeur · Accepted Answer · 2022-11-29 15:42:58Z

0

The .exerciseParts contain two <div>s, which by default have display: block, meaning they take all the width they can from their container, thus stacking vertically.

In order to change that, you can make the .exercisePart flexbox containers:

.exercisePart {
    display: flex;
}

That way by default all their children will stack horizontally and try and take the right amount of space.

answered Nov 29, 2022 at 15:42

Wolfeur

1421 silver badge8 bronze badges

Collectives™ on Stack Overflow

HTML and CSS Flexbox

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related