Height not actually changing hieght while floating-CodePudding

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 >
        <img src="icons/eShop.svg">
        <img src="icons/sverse.svg">
      </div>
      <div >
        <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.

CodePudding user response：

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 > and <div > 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.

CodePudding user response：

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 >
  <div >
    <img src="icons/eShop.svg">
    <img src="icons/sverse.svg">
  </div>
  <div >
    <p>
      Hello!
    </p>
  </div>
</div>