Can't get color to fill column

Viewed 63

I'm trying to get an entire column to show as grey however only half of it is grey and I dont know how to fix it. This is what It looks like. Ive tried to make class cloumn have a background color however that didnt work. And I'm kind of stuck on what to do now.

This is the main portion of the HTML that I want fixed.

HTML:

 <div class = "row">
            <div class = "column1">
                <div class = "sidenav">
                    <h2 id = "CSUSMCourses">California State University of San Marcos Courses</h2>
                        <button id = "button"> First Year</button>
                        <button id = "button2"> Second Year</button>
                        <button id = "button3"> Third Year</button>
                        <button id = "button4"> Fourth Year</button>
                    <h2 id = "CommunityCollege">Community College Courses</h2>
                        <button id = "button5"> SaddleBack Community College</button>
                        <button id = "button6"> IVC Community College</button>
                </div>
            </div>

This is the CSS Portion. I dont know what I need to do to get the entire column to be grey.

CSS code:

body 
{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
.header
{
    padding-left:16px;
    text-align: center;
}
  
.topnav 
{
    overflow: hidden;
    background-color: #333;
}
  
.topnav a 
{
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.topnav a:hover 
{
    background-color: #ddd;
    color: black;
}
  
.topnav a.active 
{
    background-color: #1F51FF;
    color: white;
}

.sidenav 
{
    overflow: hidden;
    background-color: #333;
}
  
.sidenav button 
{
    background-color: #333; /* Green background */
    border: 1px solid black; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    width: 100%; /* Set a width if needed */
    display: block; /* Make the buttons appear below each other */
}

.sidenav button:not(:last-child) 
{
    border-bottom: none; /* Prevent double borders */
}
  
.sidenav button:hover
{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #1F51FF;
}

.column1
{
    float: left;
    width: 19%;
    height: 100;
    margin-right: 1%;
    background-color: #333;
    clear: both;
}
.column2
{
    float: left;
    width: 80%;
    background-color: white;
}

#CSUSMCourses, #CommunityCollege
{
    color: white;
}

1 Answers

You can make the height of column1 to 100vh instead of just 100.

.column1{
    height: 100vh;
}
Related