CODEWITHSUNDEEP
javascripthtmlcssposition
tcarpenter
tcarpenter

Reputation: 265

Position variable-size elements on screen

Hoping someone can advise a good strategy for this.

I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once. enter image description here

The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.

(PS: this will only be used on a desktop computer)

Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.

Any help or suggestions would be appreciated!

Upvotes: 0

Views: 121

Answers (1)

legendemil
legendemil

Reputation: 146

youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link

Upvotes: 1

Related Questions