Hi,
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.
https://preview.webflow.com/preview/elis-groovy-project-5fb9fd?utm_medium=preview_link&utm_source=dashboard&utm_content=elis-groovy-project-5fb9fd&preview=428988e0f169664a35b32e171a4f8201&mode=preview
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.
