Menu
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
899
The min-height property defines the minimum height of an element. If the content is smaller than the minimum height, the minimum height will be applied. If the content is larger than the minimum height, the min-height property has no effect.
Definition and Usage The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements. If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height . Authors may use any of the length values as long as they are a positive value.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
