CODEWITHSUNDEEP
css
phoenix
phoenix

Reputation: 401

css width same as height not working

I have tried this and not working.

div {
    background:orange;
    height:20%;
    padding-left:20%;
}

the width become related to the window width in percent. I want to make width equal to height in a percent value,and doing that with css only.

here where I got that

any help please.

Upvotes: 1

Views: 1802

Answers (1)

semuzaboi
semuzaboi

Reputation: 5172

Provided you are ok to change the markup, you can add another div and achieve this with a bit of pseudo-elements added. Used the below markup.

<div class="parent">
 <div class="child"></div>
</div>


div.child {
  background: orange;
  height: 20%;
  margin-right: 80%;
}
.child:after {
  content: "";
  display: block;
  padding: 50% 0%;
}
div.parent {
  width: 100%;
  height: 100%;
}
<div class="parent">
  <div class="child"></div>
</div>

Upvotes: 1

Related Questions