0

I want a parent with auto height, a sibling with a height in px and the element in percentage. My only idea doesn't work and I don't have any other ideas how I can do this. I tried this (but the element height is 0; I want it to be 90% of the sibling/parent height):

#parent {
  height:auto;
  width:100%;
  background:blue;
}
#element {
  height:90%;
  width:50%;
  background:black;
}
#sibling {
  height:400px;
  width:50%;
  background:red;
}
<div id="parent">
  <div id="element"></div>
  <div id="sibling"></div>
</div>

How can I do this?

Timer
  • 13
  • 1
  • 7
  • What is not working? What is the behaviour you expect? – Helenesh Mar 01 '19 at 19:50
  • @Helenesh sorry, I added it. The height of the element-div doesn't work – Timer Mar 01 '19 at 19:52
  • The height of your element div doesn't work because there is no specified height of the parent div. One way to achieve what you're going for is to re-arrange your html. https://codepen.io/andrewgarrison/full/bZpbyQ – Andrew Garrison Mar 01 '19 at 19:56

1 Answers1

0

If I don't get it wrong, do you mean that?

.parent {
  width:100%;
  height:400px;
  background:orange;
}
.parent .first-element {
  height:90%;
  width:50%;
  background:black;
  display:block;
  position:relative;
  float: left;
  color: #FFF;
}
.parent .second-element {
  height:200px;
  width:50%;
  background:red;
  display:block;
  position:relative;
  float: right;
  color: #FFF;
}
<div class="parent">

  <div class="first-element">
      Black Element
  </div>

  <div class="second-element">
      Red Element
  </div>

</div>
selçuk doğan
  • 406
  • 4
  • 12