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).
Clone this projectDownload project assetsDownload lesson 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.