How do I stop an element from moving when the window resizes?

user_13777558 0
Viewed 81

When I resize the window (drag the right side to the right), the green line will move to the right as well. In other words, it sticks out of the box. What do I do so that it stays inside the box regardless of resizing the window?

.box {
  background-color: #000033;
  height: 500rem;
  position: absolute;
  left: 0;
  top: 0;
  width: 18rem;
}

hr {
  color: green;
  min-width: 187.5rem;
  position: fixed;
  right: 55.5rem;
  top: 6rem;
  width: 18rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
</head>
<link rel="stylesheet" type="text/css" href="portfolio.css">
</head>

<body>
  <div class="box"></div>
  <hr>
</body>

</html>

css html
4 Answers

Just remove right property it will not move

.box {
  background-color: #000033;
  height: 500rem;
  position: absolute;
  left: 0;
  top: 0;
  width: 18rem;
}

hr {
  background: red;
  color: green;
  width: 187.5rem;
  position: fixed;
  /*right: 55.5rem;*/
  top: 6rem;
  width: 18rem;
}
<div class="box"></div>
<hr>

user_135368930

I would do something like the following: https://jsfiddle.net/0vot7xrL/10/

.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 18rem;
  height: 500rem;
  background-color: #000033;
  z-index: 0;
}

.line {
  position: relative;
  display: block;
  top: 6rem;
  left: 0px;
  height: 2px;
  width: 100%;
  background-color: #fff;
  z-index: 2;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
</head>

<body>
  <div class="box">
    <div class="line"></div>
  </div>
</body>

</html>

user_67980060

Change the hr to:

hr {
  color: green;
  position: fixed;
  left: 0;
  top: 6rem;
  width: 18rem;
}
user_57158520
  1. Insert <link> in <head> tag and remove second </head>.
  2. Try writing width in % or vw and height in vh instead of rem.
  3. Remove right margin and decrease value of min-width or better use max-width in .hr selector.

Note:- Instead of rem use % and vw for text, image and even in hr because it will help your webpage/website to become more responsive.

Apply all the above points in your source code and your problem will be solved.

user_139376410
Related