Is there a css min-top property
No there's nothing like min-top
Instead you can use is
div {
position: relative;
top: 50px;
}
And for the example you shown visibility: hidden;
will be best suited here, as it will reserve the space of your hidden div
I suspect that this will do the trick for you but I believe it is not a very good practice:
#div1
{
height:100px;
outline: 1px solid red;
margin-bottom:-50px;
}
#div2{
margin-top:50px;
outline: 1px solid blue;
}
DEMO: http://jsfiddle.net/pavloschris/tbbvU/
( Just comment/uncomment the display:none
to see it work.)
I came up with this solution which utilises the top:0 bottom:0 hack.
We create a container the height of it's relative parent (if any) - we then give this a min-height (eg your min-top)
We then position the actual element absolutely to the bottom on this container.
CSS:
.container {
position:absolute;
bottom:0px;
top: 0;
min-height: 700px; //Adjust this to your MINIMUM (eg your min-top)
}
.position-me {
position: absolute;
bottom: 0;
}
HTML:
<div class="container">
<div class="position-me">Great!</div>
</div>