I want to position an HTML element in the horizontal middle and vertical golden ratio with CSS only. The height of the element must be absolutly flexible, so I can not just set
Okay, I've tested this and it appears to work. The trick though requires the two div
s, inner
and dummy
to have exactly the same contents. dummy
is used to give the outer
div the appropriate height so that the inner
div can be positioned by a percentage of that height. A bit hacky but no javascript.
http://jsfiddle.net/fVQeC/4/
Something
too
more
more
more
more
Something
too
more
more
more
more
.outer{
position: absolute;
top: 38.2%;
}
.inner{
width: 200px;
background-color: blue;
position: absolute;
top: -38.2%;
}
.dummy{
width: 200px;
visibility: hidden;
}