Div block

An overview of the div block — the most basic and versatile element in site building.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

A div block is the most basic and versatile element used when building a website. Buttons, containers, and sections are all div blocks with certain extra properties. To a certain extent, a div block can be whatever you want it to be. For example, div blocks can be used to create space or as dividers, but the most common use for a div block is to group other elements together. It defines a division in the HTML document.

In this lesson, you'll learn how to:

  1. Add a div block
  2. Convert div blocks to link blocks
  3. Create space between elements with div blocks

Add a div block

You can add a div block to your Webflow site from the Add panel. You can then group other elements inside a div block—for instance, a heading, paragraph, and button. By adding a div block and dragging these three elements inside, they can be edited and controlled as one. Setting the width of the div block to 50% will also set the content inside to 50%.

When you place elements inside of a div block, it will automatically be sized according to the content within. Centering the div block will also center its content.

Convert div blocks to link blocks

You can convert a div block to a link block to link it (and the content inside it) to other resources. This is helpful if you’ve accidentally used a div block instead of a link block when grouping content.

To convert a div block to a link block, make sure the div block doesn't contain any link elements, then right-click the div block and choose Convert to link block.

Create space between elements with div blocks

You can use div blocks to create a blank space between other elements (and give it a set height or width to push other content around). However, this method is not ideal to create space and can be difficult to track over time. As a general rule, it's better to use margin or padding to create space between elements, and only use a div block if absolutely necessary.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top