Streaming live at 10am (PST)

Section and flex layout

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.

1 Like