How to make Divs scale with window size-CodePudding

I am trying to make everything scale with the window size. I want everything to get smaller when the window gets smaller. I know I am using px right now. I have tried to use % but it doesn't work. This is my original code before trying many options.

#content,
html,
body {
  height: 98%;
  display: flex;
  justify-content: center;
}

#left {
  float: left;
  width: 400px;
  height: 100%;
  overflow: scroll;
  margin-right: 100px;
}

#middle {
  float: left;
  width: 400px;
  height: 100%;
  overflow: scroll;
  margin-right: 100px;
}

#right {
  float: left;
  width: 400px;
  height: 100%;
  overflow: scroll;
  margin-right: 100px;
}

#logo {
  width: 8%;
  position: fixed;
  left: 90vw;
  top: 50%;
  /* transform: rotate(90deg);*/
}

<div id="content">
  <div id="left">
    <a> <img  style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681950/original_c7629debee0c2a7762c915620d990344.jpg?1654123277?bc=0">
    </a>

    <a> <img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681957/original_c4b5fbf3718c1a312cc2421a74045ba2.jpg?1654123288?bc=0"></a>

    <a> <img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681949/original_b15d7f8ebebf3e2ca2d5cb437bdcdbdc.jpg?1654123275?bc=0"></a>

  </div>

  <div id="middle">
    <a> <img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681956/original_7cfae9b5813b60f571aa448dfd95c7b3.jpg?1654123288?bc=0"></a>

    <a> <img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681955/original_cc37a024fcee187603a2d6a8f6002212.jpg?1654123288?bc=0"></a>

    <a><img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681958/original_95dbfe1481cedf043711e15931f154b0.jpg?1654123289?bc=0"></a>
  </div>

  <div id="right">
    <a><img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681996/original_ca4f01773320893d1d279fbe8a6e27e6.png?1654123387?bc=0"></a>

    <a><img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681952/original_5a9a943353ec5b92a0bc20f66cfd9d08.jpg?1654123282?bc=0"></a>

    <a><img style="width: 400px;" src="https://d2w9rnfcy7mm78.cloudfront.net/16681953/original_f9d2187557f9ce24146e8053a67c8218.jpg?1654123284?bc=0"></a>

  </div>
  <a href="http://va1sseau.com/core/about.html"> <img id="logo" src="https://d2w9rnfcy7mm78.cloudfront.net/16682055/original_eeefd4d9a3b0bc9ba14efbdb9eb54d75.png?1654123743?bc=0"></a>
</div>

CodePudding user response：

using vh and vw (Viewport Height & Viewport Width respectively) could be a good option.

so your css could look like this

#left {
  float: left;
  width: 20vw;
  height: 100%;
  overflow: scroll;
  margin-right: 100px;
}

vw and vh are measured in % so 100vh is 100% a screen height and 50vw would be half a screen width.

CodePudding user response：

#content
 {
  
  display: flex;
  justify-content: space-between;
}

#left, #middle, #right {
  
 
  overflow: scroll;
  width:30vw;
}

img{
width:30vw;}
 

#logo {
  width: 8%;
  
  /* transform: rotate(90deg);*/
}

<a href="http://va1sseau.com/core/about.html"> <img id="logo" src="https://d2w9rnfcy7mm78.cloudfront.net/16682055/original_eeefd4d9a3b0bc9ba14efbdb9eb54d75.png?1654123743?bc=0"></a>
<div id="content">

  <div id="left">
    <a> <img   src="https://d2w9rnfcy7mm78.cloudfront.net/16681950/original_c7629debee0c2a7762c915620d990344.jpg?1654123277?bc=0">
    </a>

    <a> <img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681957/original_c4b5fbf3718c1a312cc2421a74045ba2.jpg?1654123288?bc=0"></a>

    <a> <img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681949/original_b15d7f8ebebf3e2ca2d5cb437bdcdbdc.jpg?1654123275?bc=0"></a>

  </div>

  <div id="middle">
    <a> <img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681956/original_7cfae9b5813b60f571aa448dfd95c7b3.jpg?1654123288?bc=0"></a>

    <a> <img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681955/original_cc37a024fcee187603a2d6a8f6002212.jpg?1654123288?bc=0"></a>

    <a><img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681958/original_95dbfe1481cedf043711e15931f154b0.jpg?1654123289?bc=0"></a>
  </div>

  <div id="right">
    <a><img src="https://d2w9rnfcy7mm78.cloudfront.net/16681996/original_ca4f01773320893d1d279fbe8a6e27e6.png?1654123387?bc=0"></a>

    <a><img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681952/original_5a9a943353ec5b92a0bc20f66cfd9d08.jpg?1654123282?bc=0"></a>

    <a><img  src="https://d2w9rnfcy7mm78.cloudfront.net/16681953/original_f9d2187557f9ce24146e8053a67c8218.jpg?1654123284?bc=0"></a>

  </div>
  
</div>

CodePudding user response：

I know you tried to use % and it didn't work, but maybe it didn't work because the width of all the components companied wasn't 100%. So you should make all the components width, the paddings, the margins even the borders! All companied should be 100% at the width.

Note: if you want to use borders is make sense more to use pixels so if you set the border for 1px for example you make the other components width companied 99%.

And you can take a look at this page to help you to make responsive web page: https://www.w3schools.com/html/html_responsive.asp