Section

Use sections to create separate blocks of content and divide the page into meaningful segments.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

A section is a layout element with a width of 100%, so it extends across the full width of the browser window. Sections play an important role in the structure and layout of a page. Sections let you create separate blocks of content and divide the page into meaningful segments.

Webflow Sections

In this lesson:

  1. Adding a Section
  2. Height of a Section

Adding a Section

Webflow Section

You can add a Section element to your page from the Elements panel (A). By default, the Section will span across the full width of the body.

 

Also by default, sections don't have padding inside. If you don’t want your content to span the width of the body, drag in a Container to keep elements centered on the page.

Webflow Sections and containers
Pro Tip: To have a good, consistent website structure, add sections in the body element, then organize your content in containers placed inside these sections.

Height of a Section

The height of a Section automatically adjusts to its content — as you add elements, the section grows taller. You can also set a specific height in the Style panel.

Auto height

When you add text and media to a Section, the height changes to define the height. No matter how much content you add, the Section height respects the content inside.

 

A Section's padding also affect its height. It’s best practice to set a Section's top and bottom padding and add content to let it adjust accordingly.

 

Setting a specific height

To set a specific height on a Section, it's a good idea to set a min-height (e.g. 500px) so the Section can expand with its content. If you set a normal height, content will eventually spill out or get cut off.

 

Using viewport height (vh)

In some cases, like when creating hero sections, you may give a Section a specific height. In this case, use the viewport height (vh) unit to specify the Section height. For example, 100vh will fill 100% of the viewport height. Setting it to 50vh will fill 50% of the viewport height, and so on.

 

Learn more about the different widths and heights units you can set on elements.

Pro Tip: Set your section’s display setting to flex to center the container and its content’s vertically inside the section.
Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback