What is the difference between a container and a div block?

Design help General
1

I’m new to Webflow so please forgive my ignorance, but I can’t quite figure out what the difference is between a container and a div block. As I understand it, a container is a type of div block, but the distinction stops there for me.

In the Webflow Div Block instructional video here, the narrator explains that a div block should be used inside a container to control a few text elements. I don’t understand why he drops a div block into the container. Why not just adjust the container itself? The container does not appear to have any distinct properties from the div block, so what is the purpose of adding another element to the puzzle?

Thanks!

2 Likes
2

A container is a div block that already has preset properties — you can drop it right into a page or section without having to manually configure its styling.

Just like a ton of the elements/components in the add panel, you can create a container from scratch by styling a div block — a container can save some time. :+1:

If you haven’t already, take a look at the content on containers here:

5 Likes
3

Hi Troy,

Section: Has standard full width of viewport and cannot have nested sections
Container: Same as Div but locked at 960 940 pixel width and auto-placed in center of page
Div: Same as a container without restrictions and can have nested divs

12 Likes
4

To clarify, in case anyone needs this pixel value, the container width is 940px; not 960px. :sunglasses:

4 Likes
5

Thank you everyone, this is very helpful

2 Likes
6

I don’t see why Containers are needed if you can just use Div Blocks for everything. You can size a DIV block very easily and you can nest them inside each other. So why would anyone use Container instead of a Div Block? sort of seems like they’re redundant.

1 Like
7

@rcstot

Why? In all CSS frameworks (bootstrap and so on) you find a container (Why? DRY - don’t repeat yourself). If you want to use a regular div (Container are not semantic tag or html5 tag - only acceptable
class name).

Another reason - On webflow it’s easier to recognize the container (Another icon) under site tree (More organize project). Last on a team, it’s better all members use the same ideas (And not each time another developer use another idea for basic container trick - max-width and margin-left/right auto).

Also usefull - how to change webflow container width:

2 Likes
8

Does anyone else have an opinion on containers vs div blocks?

9

This is a great answer. Thanks, Gary
So I guess, theoretically, a person could forgo containers and simply style a DIV the same as container?

10

As a seasoned CSS guy and Webflow noob this didn’t save me time.

Quite to the contrary it just cost me an hour to figure out that a container has arcane CSS styles not exposed in designer and thus not editable.

What’s the point of that?

If at least it was exposed as a variable like global container width. Like this it’s either custom code or just stick with divs. Not very 2024 if I may say.