Andrew Andrew - 6 months ago 7
HTML Question

How to position an element at a fixed position from the top until pushed by another element

I tried to find a question same as mine but I couldn't find one. Probably because I don't know the right words to explain my question.

Anyways, let's say I have a div that has dynamically generated content and below the div there is a button. I want to have some white space between the div and the button (about 200px). Here is a diagram to illustrate:

##############################
# #
# Div with dynamically #
# generated content #
# #
##############################



200px



##########
# Button #
##########


However, if the div's height gets larger, I want the space between the div and button to collapse until a certain minimum distance. So basically the button should not move while the div gets larger and larger until a certain distance between the div and button (for example 5px).

I know questions should show some attempt to answer the question but I don't know where to start. I was thinking to absolutely position the button relative to the parent but then the div won't push it down. I know I should give the button a
margin-top:5px;
.

Answer

I ended up finding another solution that satisfies my problem and it was so simple. I just have to wrap the expanding div with another div that has a min-height. So the expanding div will expand and not affect the position of the button until it goes past the min-height of its parent.

Nenad's answer was good as well but this one is more compatible cross-browser.

.wrap {
	min-height:100px;
}
button {
	margin-top:5px;
}
<div class="wrap">
	<div class="inner">
		Lorem ipsum dolor sit amet.
    </div>
</div>
<button>Click Here</button>

Comments