'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.

htmlcsscss-floatclearfix


Solution 1:[1]

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>

Solution 2:[2]

If I understand you correctly, you need to create a 2-column layout for your menu.

To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:

.menu-wrap {
    display: flex;
    justify-content: space-between;
}

I would then remove the float properties and you should have a working 2-column layout.

You can find more about display: flex here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Salwa A. Soliman
Solution 2 Martin Lévai

Related Questions