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. With sections, you can create separate blocks of content, dividing the page into meaningful segments.

Webflow Sections

Adding a Section

Webflow Section

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

 

Also by default, Sections do not have any padding inside. If you don’t want your content to span from edge to edge, you can drag in a container. That container sits right in the center of the section and can keep your elements neatly contained in the center of 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 is automatically determined by the content within. So if you drop some elements inside, the section will grow taller. You can also set a specific height of a section in the Styles Panel.

Auto height

When you add content such as text and media into a section, the height of the section changes to accommodate this content. This defines the height of the section. No matter how much content you add, the height of the section is going to respect the height of the content inside.

 

Adding padding inside a section will also contribute to the height of the section. It’s best practice to define naturally by setting the top and bottom padding, and adding content.

 

Setting a specific height

If you decide to set a specific height on a section, it’s best to set a min-height (e.g. 500px) so that the section is allowed to grow taller if the content inside grows. Setting a normal height is bad practice because content that exceeds its height will spill out or get cut off.

 

Using viewport height (vh)

In some cases, like when creating hero sections, you may choose to have a specific height for a section. In such cases, you can use the viewport height (vh) unit to specify the height of your section. Just type in 100vh for the min-height for the section to 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: You can set your section’s display setting to flex. This will allow you to center the container and all it’s content’s vertically inside the section.