CODEWITHSUNDEEP
htmlcss
Parham
Parham

Reputation: 224

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

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>

Upvotes: 2

Views: 92

Answers (4)

Ahron M. Galitzky
Ahron M. Galitzky

Reputation: 2261

Change the hr to:

hr {
  color: green;
  position: fixed;
  left: 0;
  top: 6rem;
  width: 18rem;
}

Upvotes: 0

s1834
s1834

Reputation: 443

  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.

Upvotes: 0

Dylan Anlezark
Dylan Anlezark

Reputation: 1267

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>

Upvotes: 0

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

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>

Upvotes: 1

Related Questions