Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Flexible layout

Posted by: Tachu Mar 20 2023, 02:25 AM

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 Tachu[attachmentid=3650] [attachmentid=3650]

Posted by: Christian J Mar 20 2023, 07:09 AM

Hello!

QUOTE(Tachu @ Mar 20 2023, 08:25 AM)

In various attempts to implement the attached layout I have tried the style position, but I think that style only allows pixel positions.

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".

Posted by: pandy Mar 20 2023, 09:00 PM

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.