Div Block

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Div Block

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, a Div Block can be used to create space or used 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.

Add a Div Block

You can add a Div Block to your Webflow project from the Elements Panel. In the example below, a heading, paragraph, and button are within a section, but the text is not legible. By adding a Div Block and dragging these three elements inside of it, they can be edited and controlled as one. Setting the width of the Div Block to 50% will also set all of the content inside to 50%, and make the text more legible.


When you place elements inside of a Div Block, it will automatically be sized according to the content within.

In the example below, the Div Block now contains the elements dropped into it. Centering the Div Block will center itself and all of its contents. 


Style a Div Block

You can style the Div Block using the Style Panel on the right. For example, a Div Block can have a background color or drop shadows. You can also give the Div Block Padding to add space between the edge of the Div Block and the content within. You can click and drag to adjust the padding as seen in the example below. Holding shift while dragging will adjust all four sides at the same time.


Nest Div Blocks

You can also place Div Blocks inside other Div Blocks. Here’s an example where a Div Block is dropped inside another Div Block and styled to look like a horizontal divider.

  1. Drop new Div Block into an existing Div Block
  2. Set width to 100px and height to 2px.
  3. Adjust the Margin to create space
  4. Add a background color

Duplicate Div Blocks

You can duplicate a Div Block, and consequently, all of the content within. There are two ways to do this:

Duplicate with right-click

  1. Right-click the Div Block (right-click on the element label if it’s hard to find empty space inside the Div Block to click on)
  2. ‍Select “duplicate” from the context menu

Duplicate with shortcuts

  1. Select the Div Block
  2. Press CMD+C (CTRL+C on Windows) to copy
  3. Press CMD+V (CTRL+V on Windows) to paste

When you duplicate a Div Block, as with any element, you will also duplicate the class and the styles attached to it. Any style changes you make to one Div Block will affect all other Div Blocks with the same class name—whether they are on the same page or another page.


After duplicating a Div Block, you can drag it to another location on the page—like a section, container, or another Div Block. You can also press CMD+X (CTRL+X on Windows) to cut, select the element you want the Div Block to be in and then press CMD+V (CTRL+V on Windows) to paste at the bottom of the selected element.

Convert div blocks to link blocks

You can convert a div block to a link block to link it, and it's content, to other resources. This is helpful when you realize that you've used a div block instead of a link block when grouping content in a layout.

To change 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 convert it to a link block.

Create space between elements

You can use Div Blocks to create a blank space between other elements (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 keep track over time. As a general rule, it is better to use Margin or Padding to create space between elements, and only use a Div Block if absolutely necessary.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form