INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator

Navigator

New

2:45

Element Basics

Element Basics

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Navbar

Navbar

New

9:38

Slider

Slider

New

4:56

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

States

States

New

2:47

Layout

Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Padding & Margin

Padding & Margin

New

2:48

Display Settings

Display Settings

New

2:54

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Positioning Overview

Positioning Overview

New

1:48

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

16:00

16:00

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

New

Triggers & animations

Triggers & animations

New

4:31

CMS & Dynamic Content

CMS & Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

2:05

Collection List

Collection List

New

3:33

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Collection Page

Collection Page

New

3:01

Using the Editor

Using the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Switch Field

Switch Field

New

0:58

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

The div block is the most basic and versatile element used in website design and development. To a certain extent, a div block can be whatever you want it to be. For example, buttons, containers, and sections are all just div blocks with extra properties. A div block can also be used to create space or dividers, but the most common use for a div block is to group other elements together. 

In this video, we'll show you how to: 

  1. Add
  2. Style
  3. Nest
  4. Duplicate Div blocks, plus show you how to use them as spacers (though we don't recommend it).

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

To a certain extent, a div block can be whatever you want it to be.

But the most common use for a div block is as a way to group other elements together.

So if we go to this section, we can see that the content (this heading, this paragraph, and this button) — the content is inside a container, which is inside the section. Pretty normal setup.

But we also know that this isn’t the most legible thing in the world, and we want something to keep all these elements — the heading, the paragraph, and the button — we want to wrap these things with something that can control this content.

So let's add a div block. And we’ll place this right in the container. And we can transfer, we can simply bring in our heading and our paragraph, and our button — right into this div block.

Now the div block has been sized by the content we just put inside. We haven’t told the div block to do anything. So to start, let’s select our div block and set a width: let’s say 50%.

And instantly you can see that everything is now nicely guided by our div block. Everything’s held together. If we center our div block, everything inside follows. We put it back? Everything follows it back. That div block, as we can see in the Navigator, is the parent element of the three elements we’ve put inside. And wherever the div block goes, those elements follow.

And even though div blocks don’t need to have any visible styles, we can do that, too. We can go down and add a background color, maybe a white color, and adjust the opacity of that color so there’s a bit of transparency and we can actually see our content, and we can go crazy here.

We go over and add a drop shadow, adjust the distance of the drop shadow… and the blur, and adjust our opacity. We can even go back up and add some padding since that content is really pushing up against the edge (it might need some breathing room). And we can click and drag, and we can hold shift to adjust the padding on all four sides at the same time.

We can also put div blocks inside of other div blocks. We’ll add a div block here in between the heading and the paragraph to create a horizontal bar or divider. And we can add a name for this one, we can creatively name it “horizontal divider.”

Let’s tell our div block to have a width of 100 pixels and a height of 2 pixels. And it’s pressed up against our paragraph here, so we can add some margin. We can just click and drag to add some margin — and then give this a color. Let’s do white, and we can drop the opacity until it looks perfect.

And just like that, we can tell a div block exactly how to behave. Div block, behave.

[Siri: “I’m not sure I understand.”]

Another organizational benefit to a div block is that — just like sections or containers — copying and pasting brings everything inside with it. You don’t have to rebuild from scratch every time.

Let’s name the class for this div block, we’ll double-click on the class to rename, and we’ll name our div block so it’s more efficient to manage: Incredible Div Block. And with our div block selected, we can copy and paste. And we’ve now duplicated our content. They’re a little close, so let’s add some margin on the bottom.

And since both div blocks have the same class applied to them? Style changes to one will apply to the other. That works throughout this page — the page we’re on — and throughout the entire project (any time we use this class).

Finally, you can use div blocks as blank space (give a block a set height or width to push other content around) but that can get really messy and hard to track over time.

The general rule there is simple. If instead you can add margin to accomplish the same thing, for instance if you can adjust margin on the element above to push down rather than creating a div block as a spacer, go that route. If you can’t do it with margin, go with a div block.

So, diiv blocks are incredibly versatile. They can hold and organize content, or they can serve really simple purposes like horizontal dividers. Or they can be completely invisible.

Those are some of the things we can do with div blocks inside our projects.