Skip to content

Containers, Div Blocks, and Housing Elements

Effective web design relies on a strong foundation, much like an architect uses a sturdy framework.

In web development, this foundation is composed of essential elements known as containers, div blocks, and housing elements.

Containers

Containers, like its literal meaning, are used to house different elements in one space. These spaces organize and present your content, creating distinct sections like headers, navigation bars, or content blocks.

When you place a container on your screen, it automatically centers itself no matter the size of your browser screen. You can also adjust its maximum width of 940 px to your liking.

Div Blocks

Individual div blocks serve as versatile building blocks. These unstyled boxes, like blank slates, allow their size, position, and properties to accommodate any type of content, from text and images to forms and videos. Each div block provides a dedicated space for your desired element, allowing you to build intricate layouts like grids or rows.

By default, a Div Block takes up 100% of your browser width.

A Link Block is similar to a Div Block except that the area inside it is a link. As you add headings, images or any elements to this block, they represent a clicking appearance.