'CSS fill the content with white space so that it can fit the place using float

<!DOCTYPE html>
<html>

<head>

  <style>
    /* <!-- Your Answer--> */
    
    * {
      /* padding: 0;
            margin: 0; */
    }
    
    body {
      background-color: rgba(209, 209, 209, 0.815);
    }
    
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgb(50, 151, 245);
      color: black;
      height: 150px;
    }
    
    .navbar {
      position: relative;
      background-color: rgb(253, 212, 77);
      color: white;
      height: 30px;
    }
    
    .navbar a {
      color: white;
      float: left;
      margin: 5px 10px;
      text-decoration: none;
    }
    
    .left-content {
      margin-bottom: 10px;
      padding: 40px;
      width: 65%;
      background-color: white;
      float: left;
    }
    
    .right-content {
      float: right;
      width: 25%;
      height: 100%;
      padding: 15px;
      background-color: white;
    }
    
    .footer {
      position: relative;
      background-color: deeppink;
      text-align: center;
      padding: 10px 0;
      clear: both;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>Web Programming</h1>
  </div>

  <div class="navbar">
    <a href="#">Home</a>
    <a href="#">Search</a>
    <a href="#">About Us</a>
  </div>

  <div class="left-content">
    <h2>What Does Web Programming Mean?</h2>
    <p> Web programming refers to the writing, markup and coding involved in Web development, which includes Web content, Web client and server scripting and network security. The most common languages used for Web programming are XML, HTML, JavaScript, Perl
      5 and PHP. </p>
    <p>
      Web programming is different from just programming, which requires interdisciplinary knowledge on the application area, client and server scripting, and database technology.
    </p>
  </div>
  <div class="right-content">
    <h3>Newsletter</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
  <div class="footer">
    <h5>Copyright ©2021 Universiti Teknologi Malaysia</h5>
  </div>

</body>

</html>

I want to fill the red place in the image with a white background I tried using float but it is not working and also position absolute with right: 0; doesn't work as well.

The issue is just with filling the extra space with white background under the Newsletter without manually changing the height to some fixed value.

htmlcss


Solution 1:[1]

You don't should use 'float'. flex is a better way:

<!DOCTYPE html>
<html>

<head>

  <style>
    /* <!-- Your Answer--> */
    
    * {
      box-sizing: border-box;
    }
    
    body {
      background-color: rgba(209, 209, 209, 0.815);
    }
    
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgb(50, 151, 245);
      color: black;
      height: 150px;
    }
    
    .navbar {
      position: relative;
      background-color: rgb(253, 212, 77);
      color: white;
      height: 30px;
    }
    
    .navbar a {
      color: white;
      margin: 5px 10px;
      text-decoration: none;
      line-height: 30px;
      
    }
    .container{
      display: flex;
      justify-content: space-between;
    }
    .left-content {
      margin-bottom: 10px;
      padding: 40px;
      width: 65%;
      background-color: white;
    }
    
    .right-content {
      width: 25%;
      height: 100%;
      padding: 15px;
      background-color: white;
    }
    
    .footer {
      position: relative;
      background-color: deeppink;
      text-align: center;
      padding: 10px 0;
      clear: both;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>Web Programming</h1>
  </div>

  <div class="navbar">
    <a href="#">Home</a>
    <a href="#">Search</a>
    <a href="#">About Us</a>
  </div>
<div class="container">
  <div class="left-content">
    <h2>What Does Web Programming Mean?</h2>
    <p> Web programming refers to the writing, markup and coding involved in Web development, which includes Web content, Web client and server scripting and network security. The most common languages used for Web programming are XML, HTML, JavaScript, Perl
      5 and PHP. </p>
    <p>
      Web programming is different from just programming, which requires interdisciplinary knowledge on the application area, client and server scripting, and database technology.
    </p>
  </div>
  <div class="right-content">
    <h3>Newsletter</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
  </div>
  <div class="footer">
    <h5>Copyright ©2021 Universiti Teknologi Malaysia</h5>
  </div>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arman Ebrahimi

Related Questions