Hello,
I'd like to position the shapes in the attached sample with percentages of the height and width of the visible browser Window the page is displayed in (viewport).

In various attempts to implement the attached layout I have tried the style position, but I think that style only allows pixel positions. And the CSS grid seems to be too rigid to implement these more free positions. And flexbox seems to only allow top, center and bottom or left, center and right. Or perhaps I have overlooked something?

I'd be grateful for any suggestions, hints or URLs on what approaches are possible here.

Thank you TachuClick to view attachment Click to view attachmentClick to view attachment

Hello!


You should be able to use e.g. percent, wv and wh units; but in smaller windows it's very likely that the content areas will overlap each other when using "position: absolute".

I think it would be hard to keep that layout in differently sized window however you do it. Unless you accept very varied text size.