Prevent a DIV from moving vertically up

How can I prevent a DIV from changing position vertically (up), if its height changes due to user input (adding rows to a table)? This is the CSS for the DIV

position: relative;
    top: 1650px;
    left: 50%;
    width: 50%;
    height: auto;
    min-height: 200px;
    max-height: 450px;
    transform: translate(-50%,-50%);
    border: solid;
    overflow: auto;
    padding: 0;

That code is unlikely to work reliably anywhere unfortunately :slight_smile:

I’d need to know a bit more about the context but the code above should never be used anywhere I’m afraid. Firstly position: relative doesn’t move anything physically as it always preserves the space it previously occupied. It may look like its somewhere else but it will leave a gap in the page at the place it would originally have been. position: relative was never meant to move structural content around like that.

The top:1650px is also a magic number and not maintainable in any environment. You need to use something that doesn’t rely on a magic number to make it work. You can usually spot magic numbers straight away as they are usually large numbers rather than something like margin:1rem which is fine you see something like margin:2300px which is not fine :slight_smile:

The centring method you are using is also an antiquated system and not something I would use these days.

I know the above comments are not much help but I’d need to know a bit more about the layout to give you a good solid answer. I have no idea why you would to move something down by 1650px as that would take it miles below the fold of the viewport.

I’m guessing perhaps that you have built a number of elements all positioned manually (with relative or absolute positioning) and thus you have no simple flow of the document to align content without explicitly positioning it.

If you could provide the full context or a demo of your page I’m sure we can come up with something much better and more manageable… :slight_smile:

That sounds as though you have centred a div but as you add more content the top edge and bottom edges must move in order to keep it centred. It would not make sense to have it centred and then not want it centred which is why I feel we need to see the problem first hand in order to help.

1 Like

Understanding the problem, the solution would be to keep the DIV centered horizontally only. How do I do that? Can a DIV with changeable height have absolute positioning while maintaining a gap with a DIV below it, or does it require relative positioning for both DIV’s?

Unfortunately absolute positioning removes the element from the flow so any other elements will not react to it. The solution would most likely be with no positioning at all but flexbox or grid to layout all the items properly.

Sorry, I can’t give an example but I don’t know the rest of your page and I don’t want to send you on a wild goose chase with the wring code :slight_smile: