Section and flex layout


I am struggling with a specific layout which I would like to achieve - see attachment for details. There is a section W=100%, in the section there is a gray background W=80%.

Here comes the tricky part: Within this section and on top of the gray background I would like to have a 2 column setup (flex) - right aligned to the browser window.

Maybe someone has an idea on how to approach something like this. Thanks!

Here is my site Read-Only: link to prototype

There’s many ways to do it.

First is to center the gray bg.
You can set it to 80% width 100% height. Margin right 10%, Position Absolute. (parent should be Position Relative)

For the column setup I would set it to 80% width, Position Absolute and right aligned, give it a top and bottom Margin of 100px.

Thank’s for your feedback! Your instructions work out until I touch the column setup - then things get messed up. Not sure why though…

You’re right.
The column setup should be 100% width, Display Flex, Justify Right. Padding top and bottom 100px. Position Relative.
Now place in it a div for the text content, give it 35% width. And another div for the image with a width of 50%.

This should work.
I created this, so you can check.

First off - I really appreciate your professional help - thank you! I probably would have had a very hard time to achieve this myself - if at all.

Works great.

1 Like