Make a DIV push the rest of the content down

Question

Everything all right? I have a question here, but I wanted to understand, not just ask people to do what I need to do. I will try to explain: I have a button to add lines of text. Below this button, I have a 600px high DIV where these lines will be created each time they are added by the button.

Underneath this DIV, there’s another one I just put to the test. What I want to understand how to do is: I need that as soon as the number of lines created within the DIV exceeds 600px, the height follows the creation of the lines and push the other div down. This is done through positioning, isn’t it? Or I’m wrong and it takes more things?

Thank you very much folks! As I said, it is a question of concept! :)

Answer 1

Hello. If you have not made any change of position, the lower div will automatically position itself according to the height set by the top. What happens is that you probably delimited the exact size of the top div. Something like:height: 600px. Instead of using this property, you should use the min-height. Thus, the "default" element will be 600px high but, if you add more content, it will automatically suit, pushing the other div down.

.div-superior{
  min-height: 600px;
}