Register to get access to free programming courses with interactive exercises

Document flow CSS: Positioning

Document flow in HTML refers to the order in which elements are rendered on a page. Normally, all blocks are rendered in the order they're written in the HTML document. This order can be changed, however, and this is what this course will be about.

Before looking at possible document flows, it's worth remembering how block and inline elements are rendered.

When you create a markup, the block elements are rendered below each other as specified in the HTML document. This kind of layout:

<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>

expects to give us three text phrases under each other:

Block 1
Block 2
Block 3

Browsers use special rules to define how items are displayed on the screen, which makes this possible. The main property of block elements is that they occupy the entire width, so all block elements are displayed below each other.

Imagine you're putting boxes in a drawer. The drawer isn't wide enough to place the boxes side by side, so the only option available is to stack them on top of each other. This is how block-level elements behave when displayed by the browser.

Block property in CSS

In addition to block elements in HTML, there are also inline elements. Their main difference is that they don't take up all the width available to them, but rather just the width needed to display the content within the element. Because of this, several consecutive line items will be displayed one after the other, without a line break. This behavior is also standard in all browsers.

Arranging little boxes on a shelf is a good analogy for this behavior. There's enough space to arrange them in a row.

Inline property in CSS

A layout wherein block and line HTML elements are rendered one after the other in the order in which they are marked in the file is called "Normal Document Flow".

It is possible to output an element from the normal flow using CSS rules There are several other types of document flow:

  • Floating Flow. This is created using the CSS property float
  • Flow with absolute positioning. This is created using the position: absolute property. We'll look at it in more detail in upcoming lessons. All you need to know is that absolute positioning pulls the element out of the flow and allows it to be placed anywhere in the page.

Combining all kinds of flows, and block and line elements is the main basis for creating any site. It is essential not to limit yourself to a single approach when other tools are available that allow you to deliver information to the user more conveniently.

float in CSS

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Development of front-end components for web applications
10 months
from scratch
Start at any time
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.