Thanos Darkadakis Thanos Darkadakis - 6 months ago 74
CSS Question

Is there a css min-top property

Is there any css property like min-height, but for top?
In the example below, when i hide div1 (via javascript), i want div2 to have top:50. Else, to be placed below div1.

<html>
<head>
<style>
#div1
{
height:100px;
}
#div2{
//min-top:50px;
}
</style>
</head>

<body>
<div id='div1'>This div may be hidden</div>
<div id='div2'>This div must not be placed above 50px</div>
</body>
</html>


Edit: as i answered below


When div1 is not hidden i want div2 to be exactly below div1. imagine div1 as a treeview which can have any height (or even be hidden) and div2 as a paragraph which should always be below 50px

Answer

I see that this question has still many views and people are still commenting. Because of the fact that the question is not fully answered, i decided to write here the complete answer:

Appropriate css:

#div1 {
    min-height:50px;
    background-color: #fee;
    margin-bottom:-50px;
}
#div2 {
    margin-top:50px;
    background-color: #efe
}

http://jsfiddle.net/vVsAn/5051/

Results

  • When div1 is hidden, div2 has a top property of 50px
  • When div1 is not hidden:
    • If div1 height is less than 50px, then div2 is placed at 50px
    • If div1 height is more than 50px, then div2 is placed right under div1
Comments