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 divison in the HTML document.

Adding 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. 

 

Styling 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.

 

Nesting 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
 

Duplicating Div Blocks

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

Duplicating 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

Duplicating 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.

Creating space

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.