Build A Newspaper Article

Someone to assist please, how can I spread the texts to occupy the full height of my div[.newspaper] container, :folded_hands:

<!--file: index.html-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Newspaper Article</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="newspaper">
      <div class="name">The Daily Chronicle</div>
      <div class="date">April 25, 2025</div>
      <div class="headline">
        Local Community Launches Green Initiative to Combat Climate Change
      </div>
      <div class="sub-headline">
        Residents and Businesses Unite for Sustainable Future
      </div>
      <div class="author">By Alex Johnson</div>
      <p class="text">
        In an inspiring display of community spirit, the town of Willowbrook has
        launched "Green Horizons," a bold new initiative aimed at reducing
        carbon emissions and promoting sustainable living. The project, funded
        by local businesses and volunteers, includes tree-planting drives, solar
        panel installations, and educational workshops on waste reduction. Mayor
        Elena Rodriguez praised the effort, stating, "This is more than an
        environmental campaign—it’s a commitment to our children’s future." Over
        200 residents attended the kickoff event, pledging to cut household
        waste by 30% this year.
      </p>
      <p class="text">
        Experts warn that small-scale efforts like Willowbrook’s are crucial in
        the fight against climate change. "Local action creates a ripple
        effect," said Dr. Samuel Greene, an environmental scientist. The
        initiative has already attracted attention from neighboring towns, with
        three communities planning similar programs. Challenges remain,
        including funding for long-term projects, but organizers remain
        optimistic. "Change starts at home," said high school student and
        volunteer Liam Carter, "and we’re just getting started."
      </p>
    </div>
  </body>
</html>

<!--file: styles.css-->

body {
  background-color: rgb(210, 198, 198);
}
html {
  font-size: 24px;
}
.newspaper {
  font-size: 16px;
  font-family: Open Sans, sans-serif;
  background-color: white;
  width: 700px;
  height: 900px;
  border-radius: 10px;
  margin: 20px auto;
  box-shadow: 0 3px 5px 0 black;
}
.name {
  font-size: 2rem;
  font-family: "Times New Roman", serif;
}
.name,
.author {
  text-transform: uppercase;
}
.headline {
  font-size: 2em;
  font-weight: bold;
}
.sub-headline {
  font-weight: 100;
  font-size: 1.5em;
  font-style: italic;
}
.author {
  font-weight: bold;
}
.text {
  text-indent: 20px;
  line-height: 2em;
}
.text::first-letter {
  font-size: 2em;
  font-weight: bold;
}
.name,
.date,
.author,
.headline,
.sub-headline,
.text {
  margin: 10px;
}

I don’t understand what you want to obtain, can you describe more?

Hi,
If you’re able to let go of the div[.newspaper] container’s 900px height and set it to “fit-content”, desired outcome can be achieved

1 Like

No way, can’t believe my eyes broh _ it worked.
Thanks :folded_hands:

1 Like