CSS Float

floatプロパティWebページのレイアウトを使用する

    <header>
      <h1>Website Title</h1>
      <p>Website slogan included here.</p>
    </header>

    <main class="main-area">
      <p>This is main. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi deleniti quod numquam? Quam,
        facilis impedit? Quam possimus numquam commodi culpa, corporis blanditiis eaque harum quaerat ratione animi
        magnam! Quas, a.</p>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus quo quam expedita vero adipisci similique
        deleniti fugit maiores odio quas repellat neque, veritatis molestiae accusamus, porro accusantium temporibus
        tempora sapiente!</p>
    </main>
    <aside class="sidebar">
      <p>This is sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores est modi amet nesciunt
        repellendus quis maiores expedita distinctio deserunt fugiat, sit laboriosam aspernatur labore rem dolore hic
        nulla laborum qui.</p>
    </aside>

    <footer>
      <p>&copy; 2021 - This is the footer.</p>
    </footer>
  

<div class="container">

    .container {
      max-width: 940px;
      margin-left: auto;
      margin-right: auto;
    }
    

<div class="content-area group">

   .content-area {
      border-top: 3px solid black;
      border-bottom: 3px solid black;
    }

   .main-area {
      width: 66%;
      float: left;
    }

    .sidebar {
      width: 34%;
      float: right;
    }
  

 <div class="fix"></div>

    .fix {
      clear: both;
    }   

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}
  

<div class="content-area group">