[SOLVED] Height not actually changing hieght while floating

Height not actually changing hieght while floating

Right now I'm coding a menu that has a two column layout. This is the code.

HTML:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>replit</title>
      <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
      <div class="stockapps">
        <img src="icons/eShop.svg">
        <img src="icons/sverse.svg">
      </div>
      <div class="main">
        <p>
          Hello!
        </p>
      </div>
    </body>
    </html>

CSS:

    .stockapps {
      background-color: #111;
      float: left;
      width: 5%;
      height: 100%;
    }
    
    .stockapps :after {
      content: "";
      display: table;
      clear: both;
    }
    
    .stockapps img{
      width:100%;
      display: inline;
      vertical-align: top;
    }
    
    .main {
      float: left;
      padding: 2%;
      width: 91%;
      overflow: hidden;
    }

The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.

I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit

This fiddle showcases the issue.

Solution

You can wrap stockapps and main divs into a container div

Style this container as below

I used background color for stockapps div to show you its height

.container {
  display: flex; 
  align-items: stretch;
    /*Set height as you want, you can use height in px */
  height: 100vh;
}

.stockapps {
/* used background-color to show you how much height it takes*/
  background-color: #999;
  /*You can ignore width if it's not convenient for your desired final output */
  width: 50%
}

<div class="container">
  <div class="stockapps">
    <img src="icons/eShop.svg">
    <img src="icons/sverse.svg">
  </div>
  <div class="main">
    <p>
      Hello!
    </p>
  </div>
</div>