Using HTML and CSS to build a resume website. Can't get div element within body to span height of site

I’ve inserted both my HTML and CSS below. I tried to make the element span the entire page using height: 100vh; and also adding that to my HTML element. It isn’t working.

I set the class ‘left’ to float: left; and then added a background color. I want the background color to span the entire height of the page.

Any advice?

Also I know my CSS needs cleaned up. I am right now just trying to make a functional and aesthetic page, will clean up after.

html {
   margin: 0;
   height: 100%;
   width: 100%;
}

body {
   margin: 0;
   min-height: 100%;
   width: 100%;
   background-color: #9f9f9f;
   font-family: helvetica, sans-serif;
}




.Army, .CCF, .OEM, .DRC {
    display: block;
    border-right: none;
}

.company, .role, .location, .period {
    display: inline-flex;
    border-right: 2px solid black;
    padding-right: 10px;
    padding-left: 10px;
}

.period {
    border-right: none;
}

.disclaimer {
    color: #bbbbbb;
    float: right;
    width: 70%;
    text-align: center;
}

.header {
    text-align: center;
    width: 100%;
    height: 100vh;
}

.name_top {
    margin: 10px;
}

.skills1, .skills2, .certifications {
    display: inline-block;
    align-items: center;
}

.skills2 {
    border-right: 2px solid black;
}

.skill_list2 ul, .skill_list1 ul, .cert_list ul {
    display: inline-block;
}

.skills {
    display: inline-block;
}

.skills1, .skills2 {
    width: 25%;
    align-content: center;
}

.certifications {
    width: 40%;
    border-right: none;
}



.skill_list2 ul, .skill_list1 ul {
    display: inline-block;
}

.p1 {
    margin-top: 30px;
    margin-bottom: 0;
}

.p2 {
    margin: 0;
    padding: 0;
}

.head1, .edu, .sk, .cert {
    text-align: center;
    padding-bottom: 10px;
}

.sk {
    width: 100%;
    align-items: center;
}
.phone_email {
    display: inline;
    align-items: center;
    text-align: center;
}

.contact_info {
    padding: 10px;
    display: inline;
    background-color: #191f41;

}

#ph, #em {
    padding-left: 5px;
    display: inline;
}

.socials  {
    display: inline;

}

.linked, .fb, .insta, .twitter {
    display: inline;
    padding: 5px;

}

#ph a, #em a, .socials a {
    color: white;
}

#ph {
    padding-right: 10px;
    border-right: 2px solid #191f41;
}

.left {
    float: left;
    width: 25%;
    padding: 10px;
    color: white;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #191f41;

}

.right {
    float: right;
    width: 70%;
    padding-right: 10px;

}

.personal_statement {
    width: 100%;
    text-align: center;
}

.college, .degree, .expected_grad, .gpa, .clubs {
    padding: 0;
    margin: 0;
    border: 0;
}

.oregon, .ohio {
    padding-bottom: 10px;
}

.edu_att {
    padding: 10px;
    display: inline-table;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device_width, initial_scale=1.0">
    <meta name="description" content="My resume to help build my portfolio in coding.">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Frank Hodges' Resume Website</title>
</head>
<body>
<p class="disclaimer">**This resume was developed entirely in Python using HTML and CSS.
    To view the source code, please check out my portfolio.</p>
<div class="right">
    <div class="personal_statement">
        <h1>Professional Profile</h1>
        <p>Well-rounded and dedicated computer science professional with a diverse skill set. Currently attending the Oregon State University pursuing a
        post-bacc degree in computer science. Developed extensive organizational and critical thinking skills from time spent serving in the United States Army.
        Long term goals include obtaining a PhD and working in the HealthTech industry, specifically in prosthetics and AI to bridge knowledge between previously obtained
        biology degree and newly obtained CS degree. Eager to learn and grow as a young computer science professional.</p>
    </div>
    <div class="s_c">
        <div class="skills1">
            <h2 class="sk">Skills:</h2>
            <ul class="skill_list1">
                <li>Python</li>
                <li>CSS</li>
                <li>HTML</li>
                <li>Microsoft 365</li>
            </ul>
        </div>
        <div class="skills2">
            <ul class="skill_list2">
                <li>Project Management</li>
                <li>Cross-function Collaboration</li>
                <li>Critical Thinking</li>
                <li>Programming</li>
            </ul>
        </div>
        <div class="certifications">
            <h2 class="cert">Certifications:</h2>
            <ul class="cert_list">
                <li>Responsive Web Design</li>
                <li>JavaScript Data Structures & Algorithms</li>
                <li>Scientific Computing with Python</li>
                <li>Programming Fundamentals</li>
                <li>Google Project Management Fundamentals</li>
            </ul>
        </div>
    </div>
    <div class="experience">
        <div class="DRC">
            <h3 class="company">Diamond Ridge Construction Services, LLC</h3>
            <h4 class="role">Commercial Project Manager</h4>
            <h4 class="location">Cleveland, OH</h4>
            <h4 class="period">Jan 2023 - current</h4>
            <ul>
                <li>Implemented operational planning and informational meetings to coordinate and
                    communicate daily work plans to groups of 25+ individuals all working for subcontractors.
                </li>
                <li>
                    Managed anywhere from 6-10 large scale commercial jobs that ranged from $900,000 to
                    $5,000,000 in pricing which accounts for more than 50% of total company revenue.
                </li>
                <li>
                    Evaluated, processed and approved submittal packages, contracts, bid summaries, and work control documents.
                </li>
                <li>
                    Oversaw projects from development phases through construction administration and final walk-throughs
                </li>
            </ul>
        </div>
        <div class="OEM">
            <h3 class="company">Office of Emergency Management</h3>
            <h4 class="role">Strike Team Leader</h4>
            <h4 class="location">Anywhere, United States</h4>
            <h4 class="period">Sep 2021 - Feb 2023</h4>
            <ul>
                <li>
                    Acted promptly to respond to federally declared natural disasters to aid local
                    authorities in emergency operations.
                </li>
                <li>
                    Reinforced local municipalities by relieving stress on EMS Ops while cities experienced up to an 800% increase in call volumes.
                </li>
                <li>
                    Initiated communication directly to the Task Force Leader through
                    daily meetings, daily reports, weekly reports and disseminated necessary information to the team.
                </li>
                <li>
                    Communicated with local officials and authorities to optimize operations and
                    task prioritization for the project team consisting of 20 personnel and 10 ambulances.
                </li>
            </ul>
        </div>
            <div class="CCF">
            <h3 class="company">Cleveland Clinic</h3>
            <h4 class="role">Medical Assistant</h4>
            <h4 class="location">Cleveland, OH</h4>
            <h4 class="period">Jul 2020 - Sep 2021</h4>
            <ul>
                <li>Oversaw the medical treatment for up to 40 patients.</li>
                <li>Coordinated treatment and care options for patients at the direction of the physician.</li>
                <li>Documented required information and coordinated the communication between patients and medical staff up to 100 messages per day.</li>
                <li>Managed efficient patient intakes, collection of data and organization of data.</li>
            </ul>
        </div>
            <div class="Army">
            <h3 class="company">Ohio Army National Guard</h3>
            <h4 class="role">68W - Combat Medic/Health Care Specialist</h4>
            <h4 class="location">Ohio</h4>
            <h4 class="period">Jul 2014 - Nov 2020</h4>
            <ul>
                <li>Acted as the lead medic overseeing Battalion Aid Station Operations during field training overseeing 10-15 personnel.</li>
                <li>Developed training scenarios and strategic plans for specific scenarios to maintain operational readiness in accordance with unit leadership.</li>
                <li>Oversaw junior personnel new to the unit and assisted their transition to the unit.</li>
                <li>Provided excellent urgent medical care in a primary care setting to 100-300 troops depending on the environment placed.</li>
            </ul>
        </div>
    </div>
</div>
<div class="left">
    <section class="header">
        <div class="name_lo_area">
            <h1 class="name_top">Frank Hodges</h1>
            <h2 class="name_top">Computer Science</h2>
            <p class="name_top">Open to relocation and remote work</p>
        </div>
        <section class="contact_info">
            <h2 class="head1">Contact Me</h2>
            <div class="phone_email">
                <p id="ph"><a href="tel:4406389797"><i class="fa fa-phone"> Call Me</i></a></p>
                <p id="em"><a href="mailto:frnkhdgs8@gmail.con"><i class="fa fa-envelope"> Email Me</i></a> </p>
            </div>
            <div class="socials"><br><br>
                <h3>socials</h3>
                <p class="linked"><a href="https://www.linkedin.com/in/hodgesfm/"><i class="fa fa-linkedin"></i></a></p>
                <p class="fb"><a href="https://www.facebook.com/frankie.hodges.9/"><i class="fa fa-facebook"></i></a></p>
                <p class="insta"><a href="https://www.instagram.com/frankiehodges_/"><i class="fa fa-instagram"></i></a></p>
                <p class="twitter"><a href="https://twitter.com/FrankieHodges_"><i class="fa fa-twitter"></i></a></p>
                <h3 class="p1">Portfolio: </h3><br>
                <p class="p2">Coming soon!</p>
            </div>
        </section>
        <section class="education">
            <div class="oregon">
                <h2 class="edu">Education</h2>
                <h4 class="college">Oregon State University</h4>
                <h5 class="degree">B.S in Computer Science</h5>
                <ul class="edu_att">
                    <li class="gpa">GPA: 4.0</li>
                    <li class="expected_grad">Expected: May, 2024</li>
                    <li class="clubs">Extracurriculars: AI club, AppDev club, Leadership Academy, Undergraduate Student Advisory Board</li>
                </ul>
            </div>
            <div class="ohio">
                <h4 class="college">THE Ohio State University</h4>
                <h5 class="degree">B.A in Biology</h5>
                <ul class="edu_att">
                    <li class="gpa">GPA: 3.2</li>
                    <li class="expected_grad">Completed: May 2020</li>
                    <li class="clubs">Extracurriculars: PhiDE Pre-Med Frat, RallyCap Sports, Volunteer Coordinator (POINTapp), Special Events Intern(Columbus Literacy Council)</li>
                </ul>
            </div>
        </section>
    </section>
</div>

</body>
</html>

>Solution :

Using float is very sketchy, float was designed to stick images and such on certain sides of the screen while wrapping text around it. Because of this it has some very weird and quirky rules. Never use float.

Here are the changes I made to make your code work

Swapped right and left, so left comes first
Put the disclaimer in the right div
Removed the positioning css on the left and right elements
Made the body a grid with colums 25% and 75%

If you would like to make your website "responsive" consider using viewport units thruout instead of hardcoding px numbers in for padding, etc. Also consider using a media rule to place the left div at the top for mobile screens

html {
  margin: 0;
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background-color: #9f9f9f;
  font-family: helvetica, sans-serif;
  display: grid;
  grid-template-columns: 25% 75%;
  width: 100%;
}

.Army,
.CCF,
.OEM,
.DRC {
  display: block;
  border-right: none;
}

.company,
.role,
.location,
.period {
  display: inline-flex;
  border-right: 2px solid black;
  padding-right: 10px;
  padding-left: 10px;
}

.period {
  border-right: none;
}

.disclaimer {
  color: #bbbbbb;
  padding-left: 10%;
  padding-right: 10%;
  text-align: center;
}

.header {
  text-align: center;
  width: 100%;
  height: 100vh;
}

.name_top {
  margin: 10px;
}

.skills1,
.skills2,
.certifications {
  display: inline-block;
  align-items: center;
}

.skills2 {
  border-right: 2px solid black;
}

.skill_list2 ul,
.skill_list1 ul,
.cert_list ul {
  display: inline-block;
}

.skills {
  display: inline-block;
}

.skills1,
.skills2 {
  width: 25%;
  align-content: center;
}

.certifications {
  width: 40%;
  border-right: none;
}

.skill_list2 ul,
.skill_list1 ul {
  display: inline-block;
}

.p1 {
  margin-top: 30px;
  margin-bottom: 0;
}

.p2 {
  margin: 0;
  padding: 0;
}

.head1,
.edu,
.sk,
.cert {
  text-align: center;
  padding-bottom: 10px;
}

.sk {
  width: 100%;
  align-items: center;
}

.phone_email {
  display: inline;
  align-items: center;
  text-align: center;
}

.contact_info {
  padding: 10px;
  display: inline;
  background-color: #191f41;
}

#ph,
#em {
  padding-left: 5px;
  display: inline;
}

.socials {
  display: inline;
}

.linked,
.fb,
.insta,
.twitter {
  display: inline;
  padding: 5px;
}

#ph a,
#em a,
.socials a {
  color: white;
}

#ph {
  padding-right: 10px;
  border-right: 2px solid #191f41;
}

.left {
  padding: 10px;
  color: white;
  background-color: #191f41;
}

.personal_statement {
  width: 100%;
  text-align: center;
}

.college,
.degree,
.expected_grad,
.gpa,
.clubs {
  padding: 0;
  margin: 0;
  border: 0;
}

.oregon,
.ohio {
  padding-bottom: 10px;
}

.edu_att {
  padding: 10px;
  display: inline-table;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device_width, initial_scale=1.0">
  <meta name="description" content="My resume to help build my portfolio in coding.">
  <link rel="stylesheet" href="styles.css" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Frank Hodges' Resume Website</title>
</head>

<body>
  <div class="left">
    <section class="header">
      <div class="name_lo_area">
        <h1 class="name_top">Frank Hodges</h1>
        <h2 class="name_top">Computer Science</h2>
        <p class="name_top">Open to relocation and remote work</p>
      </div>
      <section class="contact_info">
        <h2 class="head1">Contact Me</h2>
        <div class="phone_email">
          <p id="ph"><a href="tel:4406389797"><i class="fa fa-phone"> Call Me</i></a></p>
          <p id="em"><a href="mailto:frnkhdgs8@gmail.con"><i class="fa fa-envelope"> Email Me</i></a> </p>
        </div>
        <div class="socials"><br><br>
          <h3>socials</h3>
          <p class="linked"><a href="https://www.linkedin.com/in/hodgesfm/"><i class="fa fa-linkedin"></i></a></p>
          <p class="fb"><a href="https://www.facebook.com/frankie.hodges.9/"><i class="fa fa-facebook"></i></a></p>
          <p class="insta"><a href="https://www.instagram.com/frankiehodges_/"><i class="fa fa-instagram"></i></a></p>
          <p class="twitter"><a href="https://twitter.com/FrankieHodges_"><i class="fa fa-twitter"></i></a></p>
          <h3 class="p1">Portfolio: </h3><br>
          <p class="p2">Coming soon!</p>
        </div>
      </section>
      <section class="education">
        <div class="oregon">
          <h2 class="edu">Education</h2>
          <h4 class="college">Oregon State University</h4>
          <h5 class="degree">B.S in Computer Science</h5>
          <ul class="edu_att">
            <li class="gpa">GPA: 4.0</li>
            <li class="expected_grad">Expected: May, 2024</li>
            <li class="clubs">Extracurriculars: AI club, AppDev club, Leadership Academy, Undergraduate Student Advisory Board</li>
          </ul>
        </div>
        <div class="ohio">
          <h4 class="college">THE Ohio State University</h4>
          <h5 class="degree">B.A in Biology</h5>
          <ul class="edu_att">
            <li class="gpa">GPA: 3.2</li>
            <li class="expected_grad">Completed: May 2020</li>
            <li class="clubs">Extracurriculars: PhiDE Pre-Med Frat, RallyCap Sports, Volunteer Coordinator (POINTapp), Special Events Intern(Columbus Literacy Council)</li>
          </ul>
        </div>
      </section>
    </section>
  </div>

  <div class="right">
    <p class="disclaimer">**This resume was developed entirely in Python using HTML and CSS. To view the source code, please check out my portfolio.</p>
    <div class="personal_statement">
      <h1>Professional Profile</h1>
      <p>Well-rounded and dedicated computer science professional with a diverse skill set. Currently attending the Oregon State University pursuing a post-bacc degree in computer science. Developed extensive organizational and critical thinking skills from
        time spent serving in the United States Army. Long term goals include obtaining a PhD and working in the HealthTech industry, specifically in prosthetics and AI to bridge knowledge between previously obtained biology degree and newly obtained
        CS degree. Eager to learn and grow as a young computer science professional.</p>
    </div>
    <div class="s_c">
      <div class="skills1">
        <h2 class="sk">Skills:</h2>
        <ul class="skill_list1">
          <li>Python</li>
          <li>CSS</li>
          <li>HTML</li>
          <li>Microsoft 365</li>
        </ul>
      </div>
      <div class="skills2">
        <ul class="skill_list2">
          <li>Project Management</li>
          <li>Cross-function Collaboration</li>
          <li>Critical Thinking</li>
          <li>Programming</li>
        </ul>
      </div>
      <div class="certifications">
        <h2 class="cert">Certifications:</h2>
        <ul class="cert_list">
          <li>Responsive Web Design</li>
          <li>JavaScript Data Structures & Algorithms</li>
          <li>Scientific Computing with Python</li>
          <li>Programming Fundamentals</li>
          <li>Google Project Management Fundamentals</li>
        </ul>
      </div>
    </div>
    <div class="experience">
      <div class="DRC">
        <h3 class="company">Diamond Ridge Construction Services, LLC</h3>
        <h4 class="role">Commercial Project Manager</h4>
        <h4 class="location">Cleveland, OH</h4>
        <h4 class="period">Jan 2023 - current</h4>
        <ul>
          <li>Implemented operational planning and informational meetings to coordinate and communicate daily work plans to groups of 25+ individuals all working for subcontractors.
          </li>
          <li>
            Managed anywhere from 6-10 large scale commercial jobs that ranged from $900,000 to $5,000,000 in pricing which accounts for more than 50% of total company revenue.
          </li>
          <li>
            Evaluated, processed and approved submittal packages, contracts, bid summaries, and work control documents.
          </li>
          <li>
            Oversaw projects from development phases through construction administration and final walk-throughs
          </li>
        </ul>
      </div>
      <div class="OEM">
        <h3 class="company">Office of Emergency Management</h3>
        <h4 class="role">Strike Team Leader</h4>
        <h4 class="location">Anywhere, United States</h4>
        <h4 class="period">Sep 2021 - Feb 2023</h4>
        <ul>
          <li>
            Acted promptly to respond to federally declared natural disasters to aid local authorities in emergency operations.
          </li>
          <li>
            Reinforced local municipalities by relieving stress on EMS Ops while cities experienced up to an 800% increase in call volumes.
          </li>
          <li>
            Initiated communication directly to the Task Force Leader through daily meetings, daily reports, weekly reports and disseminated necessary information to the team.
          </li>
          <li>
            Communicated with local officials and authorities to optimize operations and task prioritization for the project team consisting of 20 personnel and 10 ambulances.
          </li>
        </ul>
      </div>
      <div class="CCF">
        <h3 class="company">Cleveland Clinic</h3>
        <h4 class="role">Medical Assistant</h4>
        <h4 class="location">Cleveland, OH</h4>
        <h4 class="period">Jul 2020 - Sep 2021</h4>
        <ul>
          <li>Oversaw the medical treatment for up to 40 patients.</li>
          <li>Coordinated treatment and care options for patients at the direction of the physician.</li>
          <li>Documented required information and coordinated the communication between patients and medical staff up to 100 messages per day.</li>
          <li>Managed efficient patient intakes, collection of data and organization of data.</li>
        </ul>
      </div>
      <div class="Army">
        <h3 class="company">Ohio Army National Guard</h3>
        <h4 class="role">68W - Combat Medic/Health Care Specialist</h4>
        <h4 class="location">Ohio</h4>
        <h4 class="period">Jul 2014 - Nov 2020</h4>
        <ul>
          <li>Acted as the lead medic overseeing Battalion Aid Station Operations during field training overseeing 10-15 personnel.</li>
          <li>Developed training scenarios and strategic plans for specific scenarios to maintain operational readiness in accordance with unit leadership.</li>
          <li>Oversaw junior personnel new to the unit and assisted their transition to the unit.</li>
          <li>Provided excellent urgent medical care in a primary care setting to 100-300 troops depending on the environment placed.</li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>

Dev solutions

Solutions for development problems

Using HTML and CSS to build a resume website. Can't get div element within body to span height of site

>Solution :

Like this:

Related

Leave a ReplyCancel reply

>Solution :

Share this:

Like this:

Related

Leave a ReplyCancel reply