Setting CSS Top Percent Not Working as Expected

Setting CSS top percent not working as expected

Define a dimension for the parent container, e.g. div:

<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
    </div>
</div>

Another way is to just stretch the parent container, i.e. div, by its top, bottom, left, and right properties. Like this:

<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
    </div>
</div>

IE setting top to a percentage value not working for an absolutely positioned element inside table-cell

I ended up doing it by using an extra nested div which is absolutely positioned in relation to the relatively positioned table (not the table-cell). http://jsfiddle.net/amrn/qn0dwohn/17/

The downside is that I have to explicitly set the width on that extra div to be the same as its parent.

.wrapper {  display: table;  position: relative;}
.left,.right {  display: table-cell;  width: 200px;}
.left {  height: 300px;  background-color: orange;}
.right {  background-color: teal;}
.right-wrapper {  position: absolute;  width: 200px;  bottom: 0;  top: 0;  background-color: aquamarine;}
.centered {  background-color: tomato;  height: 70px;  width: 70px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

<div class="wrapper">  <div class="left"></div>  <div class="right">    <div class="right-wrapper">      <div class="centered"></div>    </div>  </div></div>

margin-top in percentage not working as expected

The point is that a percentage value for top/bottom margin/padding properties is relative to the width of the box's containing block. It doesn't respect the height of the parent element.

8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

<percentage> The percentage is calculated with respect to the width
of the generated box's containing block. Note that this is true for
margin-top and margin-bottom as well. If the containing block's
width depends on this element, then the resulting layout is undefined
in CSS 2.1.

As you are using absolute positioning, try using top: 99% instead in which a percentage value refers to the height of the box's containing block.

Css height in percent not working

You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.

html, body { height: 100%; width: 100%; margin: 0; }div { height: 100%; width: 100%; background: #F52887; }

<html><body><div></div></body></html>

CSS Bottom Property doesn't work with percentages (only pixels)

Try this Code:

html, body {     height: 100%;}#header {    position: relative;    height: 10%;}#header h2{  margin: 0;}#logo {    background:red; }#logo img{    background-color: coral;    }#logo h2{    font-family: 'Gloria Hallelujah', cursive; }
#nav nav {    position: absolute;    left: 85%;    bottom: 50%;    width: 100%;    height: 0;}#nav nav a {    font-family: 'Gloria Hallelujah','Rubik Mono One', sans-serif;    margin-right: 1em; }

<body><div id = "header">  <div id = "logo">    <img src="" alt="Sample Image" width="42" height="42">    <h2>title</h2>  </div>  <div id = "nav">      <nav>           <a routerLink="/"> HOME </a>          <a routerLink="/about"> ABOUT </a>          <a routerLink="/blog"> BLOG </a>      </nav>  </div>
</div>
</body>

Setting CSS Top Percent Not Working as Expected