Relative / Absolute positioning

Design help General
1

Hi,
I’m new to webflow and I try to create a landing page with the following structure.

1024×768 63.4 KB

(Grey is an image background)
How I could force the text body and the form field to stay under the banner? (when I resize the browser window) If it can be done with relative/absolute positioning, how could I make the banner field their parent element?

Thank you very much in advance,
Rebeka

2

Try this then:

http://vincent.polenordstudio.fr/snap//1f5a27ef24aecba6.jpg_1024768_2015-01-26_13-53-56.jpg

Containers are elements that are keeping your content in the middle of the site, ie “aligned” with other elements in containers.

No positioning at all required here.

PS the text in green reads “Section widget”

3 Likes
3

Hi @rkurdi, @vincent is right. You will not need any positioning for this layout. Try the following:

Body
  Main Div (with background image)
    Container
      Hero Div (your banner)
      Row (with 2 columns)
        Column 1 (spanning 8 columns)
        Column 2 (spanning 4 columns)

This is only a slight modification from Vincents recommendation to take into account your gray section (I try to avoid styling the body if possible) I hope this helps - it should get you started with your layout. :smile:

EDIT in re: @Revolution’s comment: Yes, styling the body for site-wide styles (i.e. fonts etc) is encouraged and imo falls under industry best practices. For other things, try to avoid if possible.

4

for the body… I generally only class default font-family / font-size.

Generally nothing else unless absolutely needed.

1 Like
5

Thank you for your help guys, I didn’t have the time to respond yet, but Vincent’s solution worked perfectly well!

1 Like