Issue

This Content is from Stack Overflow. Question asked by Tsupek

Alright, so I’m trying to have the text stay within the borders of my main column, but it’s overflowing as shown in the image. I’ve tried changing the height, but then I get the teal background within the aside(right side) section. I’m pretty new to coding, and I just can’t figure it out.
So, in short, I’m trying to have the text automatically fit within the borders, and not have the teal background leak into the columns.
First Image has website with height set to a specific height

Second image has the height set to auto but then in aside I get the teal background leaking in.

Code:

<!DOCTYPE html>
<html>
    <head>
    <title>Trevor Supek</title>
    <style>
      body{
        font-family: Arial, Helvetica, sans-serif;
          background-color: teal;
          width: 962px;
          margin: 15px auto;
          border: 1px solid black;
      }
      header{
        color: teal;
        font-size: 26px;
        font-weight: bold;
        height: 77px;
        background-color: white;
        width: 96.875%;
        padding: 15px 1.5625%;
        border-bottom: 2px solid black;
      }
      .title{ color: teal; background-color: white;}
      main{
        height: auto;
        width: 600px;
        float: left;
        border-right: 2px solid black;
        background-color: white;
      }
      .subtitle { font-size: 1.4em; color: orange; font-weight: bold; background-color: white;}
      .asidetitle { font-size: 1.4em; color: #999999; background-color: white; width: 360px; float: right;}
      aside{
        width: 360px;
        float: right;
        background-color: white;
        height: 350px;
      }
      footer{
        font-weight: bold;
        clear: both;
        border-top: 2px solid black;
        background-color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header>
      <img src="triceratopslogo.jpeg" alt="Triceratops Logo">
      <span class="title">Trevor Supek</span>
    </header>
       <main>
                <p class="subtitle">Objectives</p>
         <ul>
           <li> Obtain Associate's Degree </li>
           <li> Transfer to 4-year college</li>
           <li> Obtain Bachelor's Degre</li>
         </ul>
                <p class="subtitle">Course completed (or currently enrolled in):</p>
         <ol><h4> Courses Taken: </h4>
           <li> </li>
           <li> </li>
           <li> </li>
         </ol>
         <ol><h4>Current Courses: </h4>
           <li> IT 1150-Intro to Web Programming </li>
           <li> BADM 2010-Buisness Communication </li>
         </ol>
         <ol><h4>Future Courses: </h4>
           <li> IT 2700- Systems Analysis and Design</li>
           <li> ITNT 2300- Networking Fundamentals</li>
           <li> IT 2030-ASP.NET Web Programming</li>
           <li> </li>
           <li> </li>
           <li> </li>
           <li> COMM 1010-Fundemntals of Speech Communication </li>
         </ol>
        
         
                <p class="subtitle">Hobbies:</p>
         <ol type="a">
           <li> Playing Video Games</li>
           <li> Reading Manga</li>
           <li> Working Out </li>
         </ol>
                <p class="subtitle">Favorite Books:</p>
         <ol type="i">
           <li>Percy Jackson and The Lightning Thief By Rick Riordian</li>
           <li> Journey To the Center Of The Earth By Joules Verne</li>
           <li>Death March to the Parallel World Rhapsody By Hiro Ainana</li>
         </ol>
        </main>
        <aside>
                <p class="asidetitle">Code Examples</p>
          <a href="https://github.com/S01233499/Lab-4-repository.git">  Lab 04 Re</a>
                <p class="asidetitle">Organizations</p>
          <ul>
            <li> Civil Air Patrol</li>
            <li> Esports Club</li>
            <li> CyberSecurity Club</li>
          </ul>
        </aside>
        <footer class="footer">
          S01233499@acad.tri-c.edu
        </footer>
  </body>
</html>

Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.