Question 43427 in Html Question posted in
Some basic documentation can be found here.

how do I make div's look the same no matter what monitor its on? – Html

I’m having problems figuring out how to make two divs not stack on top of each other when I’m on my laptop. it looks normal when I’m on my desktop.

I tried to make the divs width smaller hopefully making it not big enough to stack when I switch monitors but that didn’t work.

body {
  background-color: darkgray;
}

div {
  border: solid;
  border-color: black;
  border-width: 1.5px;
}

.outer {
  height: 850px;
  width: 225px;
  border-radius: 10px;
  margin-left: 300px;
  margin-top: 75px;
  display: inline-block;
}

.mid {
  width: 200px;
  height: 75px;
  margin-left: 12.5px;
  margin-top: 10px;
  border-radius: 10px;
}

.body-model {
  height: 850px;
  width: 1000px;
  margin-left: 50px;
  display: inline-block;
  border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <script href="index.js"></script>
  <title>title</title>
</head>

<body>
  <div class="outer">
    <div class="mid">
    </div>
  </div>
  <div class="body-model">
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    Im not exactly sure which of the divs you’re talking about, but the general approach is to use relative instead of static units.

    Your approach

    In the example you provided you mostly use px as a unit, this is static because the size of the pixel is a fixed unit no matter of the device you are using

    What you should do instead

    Try to use relative units like %, vw (viewport width) or vh (viewport height). These values will scale based on the maximum window size and stay proprotional to that maximum size.

    So try switching up your units to relative values

    For reference you can look at this

    If you want to stop the general overlapping of the content different approaches may be advisable like

    1. a margin on one of the divs
    2. a div that serves as a gap between the two divs (general not the best approach, only use in case there are no other ways)
    3. or a parent container with certain css properties

    If you want the behavior of each container to change based off a certain size of the window you may use mediaqueries

    @media (max-width: 1250px) {
  /* … */
}

    Further instruction on mediaqueries here

    Login or Signup to reply.
  2. 0

    In this example I did what I would do in this situation, but in reality there are multiple ways of doing this, display: grid being one of them.
    What I did is change the wrapper (could be a div, not necessarily the body) display to flex, by default the flex-direction: column, making them go side-by-side.
    And then I proceeded by setting the .outer class to be a fixed width, since this looks like a sidebar (if it’s not you can tweak with it), and then on .body-model I changed the width to 100%. I did remove the margin-* from each class since if the idea was centering the whole thing, display: flex or display: grid should be used instead.
    PS: If this is a layout of sorts, I would recommend changing the .wrapper height to 100vh, and changing each child height to 100%.

    body {
  background-color: darkgray;
}

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

div {
  border: solid;
  border-color: black;
  border-width: 1.5px;
}

.outer {
  height: 850px;
  width: 200px;
  border-radius: 10px;
  display: inline-block;
}

.mid {
  height: 75px;
  margin: 1rem;
  border-radius: 10px;
}

.body-model {
  height: 850px;
  width: 100%;
  margin-left: 50px;
  display: inline-block;
  border-radius: 10px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <script href="index.js"></script>
  <title>title</title>
</head>

<body class='wrapper'>
  <div class="outer">
    <div class="mid">

    </div>
  </div>
  <div class="body-model">

  </div>
</body>





</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search