htmlcsssidenav

How would i keep my Divs in scale for different screen resolutions?

i've currently started to work on a website to play checkers on, but im facing issues with scaling on displays, at school, i used my laptop to code the website, once i got home to try it on my desktop, the sidenav and main content were misaligned and didn't look like they were inteded to look like... so im just confused on what to do and how to keep them in size whether someone uses a laptop or a desktop.

I tried making the side nav 25% of the screen and the main content 75%... but that didn't work... so i adjusted the main content to take 85% of the screen, and it worked but on the PC only, on laptops it was weird again... im really stuck here lol

.divMain {
  background-color: rgba(0, 0, 0, 0.596);
  width: 85%;
  float: right;
  padding: 10px;
}


/* The side navigation menu */

.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 25%;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  padding-left: 10px;
  padding-right: 10px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #b4b4b4;
  display: block;
  transition: 0.3s;
}

.sidenav .Logo {
  padding: 8px 0px 8px 0px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
  color: #f1f1f1;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* Style page content
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}


/* The sidenav */

.sidenav {
  right: 0;
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.705);
  overflow-x: hidden;
  padding-top: 20px;
}


/* Page content */

.main {
  margin-left: 200px;
  /* Same as the width of the sidenav */
}
<!DOCTYPE html>
<html>

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
  </style>
  <!-- Font Awesome icons !-->
  <script src="https://use.fontawesome.com/cb792220ec.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Home | Checkers.place</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div style="overflow-y: hidden;" id="mySidenav" class="sidenav">
    <a class="Logo" href="index.html"><img style="width:200px;" src="logoYellow.png"></a>
    <a href="#"><i class="fa fa-play-circle" aria-hidden="true"></i> Play</a>
    <a href="learn.html"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Learn</a>
    <a href="social.html"><i class="fa fa-users" aria-hidden="true"></i> Socialize</a>
    <a style="font-size:22px;" href="plus.html"><i class="fa fa-plus-circle" style="color:#FBCD08;" aria-hidden="true"></i> <span style="color:#adadad;">Checkers</span> <strong><span style="color: #FBCD08;">plus</span></strong></a>
    <a href="plus.html">
      <div class="plusAd">
        <h1>Tired of ads?</h1>
        <p>why not subscribe to Checkers Plus?</p>
        <p style="font-size: 18px;"><i class="perkYes fa fa-check" aria-hidden="true"></i> Ad free</p>
        <p style="font-size: 16px;"><i class="perkYes fa fa-check" aria-hidden="true"></i> Exclusive Items</p>
        <p>... + More!</p>
        <h2> $4.99/month </h2>
      </div>
    </a>
  </div>

  <div class="divMain" id="divMain">
    <strong><p style="font-family: 'Poppins', sans-serif;" class="userNameText"><img src="anon.png" class="userIcon">xJEMAx</p></strong>
  </div>
</body>

</html>

Yes, there's more CSS but that CSS is for user icons and other stuff unrelated to the divs lol

Solution

  • Flexbox is your friend on this one. You'll want to read up on it more than I can explain here, but by setting display: flex; on the parent element you can set the widths to 25% and 75% to line them up next to each other.

    You also had some code in multiple places for .divMain and .sidenav so I cleaned that up. You want to only write code for each selector in one place.

    /* where the magic happens */
body {
  display: flex;
}

/* Page content */
.divMain {
  background-color: rgba(0, 0, 0, 0.596);
  width:75%; /* WIDTH 75% */
  padding:10px;
}
/* The side navigation menu */
.sidenav {
  width: 25%; /* WIDTH 25% */
  background-color: rgba(0, 0, 0, 0.705);
  padding-top: 20px;
  padding-left:10px;
  padding-right:10px;
  transition: 0.5s;
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #b4b4b4;
  display: block;
  transition: 0.3s;
}

.sidenav .Logo {
  padding: 8px 0px 8px 0px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
    <html>

<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
    </style>
    <!-- Font Awesome icons !-->
  <script src="https://use.fontawesome.com/cb792220ec.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Home | Checkers.place</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div style="overflow-y: hidden;"id="mySidenav" class="sidenav">
    <a class="Logo" href="index.html"><img style="width:200px;" src="logoYellow.png"></a>
    <a href="#"><i class="fa fa-play-circle" aria-hidden="true"></i> Play</a>
    <a href="learn.html"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Learn</a>
    <a href="social.html"><i class="fa fa-users" aria-hidden="true"></i> Socialize</a>
    <a style="font-size:22px;"href="plus.html"><i class="fa fa-plus-circle" style="color:#FBCD08;" aria-hidden="true"></i> <span style="color:#adadad;">Checkers</span> <strong><span style="color: #FBCD08;">plus</span></strong></a>
    <a href="plus.html"><div class="plusAd">
      <h1>Tired of ads?</h1>
      <p>why not subscribe to Checkers Plus?</p>
      <p style="font-size: 18px;"><i class="perkYes fa fa-check" aria-hidden="true"></i> Ad free</p>
      <p style="font-size: 16px;"><i class="perkYes fa fa-check" aria-hidden="true"></i> Exclusive Items</p>
      <p>... + More!</p>
      <h2> $4.99/month </h2>
    </div></a>
  </div>
  
  <div class="divMain" id="divMain">
      <strong><p style="font-family: 'Poppins', sans-serif;" class="userNameText"><img src="anon.png" class="userIcon">xJEMAx</p></strong>
  </div>
</body>

</html>