Why is my right floated div not having it's height working as a percent?

Question

I have a div that I'm trying to float on the right, but that's not the problem. When I set the height to 90%, the height doesn't change.

html {
  background: linear-gradient(to left, #19e5e2f1, #0a60f5);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html,
body {
  width: 100%;
  height: 100%;
}

.rightbox {
  position: relative;
  left: -50px;
  float: right;
  height: 90%;
  width: 45%;
  background: #229492f1;
  opacity: 0.5;
  border-radius: 15px;
}

<!DOCTYPE html>
<html lang="en">

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

<body>
  <main>
    <div class="rightbox"></div>
  </main>
  <script src="script.js"></script>
</body>

</html>

When I use this code, it doesn't respect the height value.

Can anyone help me fix this?

What height value? 90% of the height of the parent. But the parent has no height. — A Haworth, Mar 01 '23 at 23:41
Does this answer your question? [CSS – why doesn’t percentage height work?](https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) — jme11, Mar 01 '23 at 23:46

score 0 · Accepted Answer · answered Mar 02 '23 at 03:57

Welcome to stackoverflow, Height doesn't changed because,

When you specify the height or width as a percentage, that's a percentage with respect to the element's parent

Here rightbox's parent main element does not have any height by default, so you have to specify the height value for it.

html {
  background: linear-gradient(to left, #19e5e2f1, #0a60f5);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html,
body {
  width: 100%;
  height: 100%;
}

.rightbox {
  position: relative;
  left: -50px;
  float: right;
  height: 90%;
  width: 45%;
  background: #229492f1;
  opacity: 0.5;
  border-radius: 15px;
}

/* new content */
main{
  height:100%;
}

<!DOCTYPE html>
<html lang="en">

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

<body>
  <main>
    <div class="rightbox"></div>
  </main>
  <script src="script.js"></script>
</body>

</html>

Why is my right floated div not having it's height working as a percent?

1 Answers1