Document flow

In addition to styling elements, CSS can manipulate how the elements flow. The flow refers to how the element follow each other in the document, and how they behave next to each other. Each element has a default rule, e.g. block elements will start on a new line, while the inline elements will continue on the same line. This behaviour can be changed using the CSS properties float, positionand z-index.

If one block element sits inside another block element, then the outer element is know as the containing or parent element. It is common to group a number of elements together inside a <div> (or other block-level) element. E.g., you might group together all of the elements that form the header of a site (such as the logo and the main navigation). The <div> element that contains this group of elements is then referred to as the containing (or parent) element. An element may be nested inside several other block-level elements. The containing element is always the direct parent of that element.

CSS has the following position schemes that allow you to control the layout of a page: normal flow, relative positioning, and absolute positioning. You specify the positioning scheme using the position property. You can also float elements using the float property.

Normal flow

In normal flow, each block-level element sits on top of the next one. Since this is the default way in which browsers treat HTML elements, you do not need a CSS property to indicate that elements should appear in normal flow, but the syntax would be position: static;.

In the example below, the width property for the heading has not been specified, so you can see how it stretches the width of the entire browser window by default. The paragraphs are restricted to 450 pixels wide. This shows how the elements in normal flow start on a new line even if they do not take up the full width of the browser window. All of the examples demonstrated in this section, and the rest about document flow, will use a similar HTML structure.

HTML

<body>
    <h1>Normal flow</h1>
    <p>
        Every block element (...) do something else).
    </p>
    <p>
        In normal flow, (...) be position: static;.
    </p>
</body>

CSS

body {
    width: 750px;
    font-family: Arial, Verdana, sans-serif;
    color: #040404;
    background-color: #FCFCFC;
}

h1 {
    background-color: #EFEFEF;
    padding: 10px;
}

p {
    width: 450px;
}

Relative positioning

The second paragraph has been pushed down and right from where it would otherwise have been in a normal flow.

Relative positioning moves an element in relation to where it would have been in normal flow. E.g., you can move it 10 pixels lower than it would have been in normal flow, or 20% to the right. You can indicate that an element should be relatively positioned using the position property with the value relative.

You then use the offset properties (top, bottom, left or right) to indicate how far to move the element from where it would have been in normal flow. To move the box up or down, you can use either the top or bottom properties. To move the box horizontally you can use either the left or right properties. The values of the box offset properties are usually given in pixels, percentages or ems.

The following code is for the example given above:

HTML

<body>
    <h1>Relative positioning</h1>
    <p class="relative">
        Relative positioning moves \(...\) the value relative.
    </p>
    <p>
        You then use the offset \(...\), percentages or ems.
    </p>
</body>

CSS

.relative{
    position: relative;
    left: 100px;
}

Absolute positioning

This positions the element in relation to its containing element. It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up). Absolutely positioned elements move as users scroll up and down the page.

![Relative positioning](images/absolute_positioning.png)

In this example, the heading has been positioned at the top of the page and 500 pixels from its left edge. The width of the heading is set to be 250 pixels wide. The `width` property has also been applied to the `<p>` elements in this example to prevent the text from overlapping and becoming unreadable.

The following code is for the example given above:

HTML

<body>
    <h1>Absolute positioning</h1>
    <p>
        In this example, the heading \(...\) and becoming unreadable.
    </p>
</body>

CSS

h1 {
    position: absolute;
    top: 0px;
    left: 500px;
    width: 250px;
}

p {
    width: 450px;
}

When the position property is given a value of absolute. the box is taken out of normal flow and no longer affects the position of other elements on the page (they act like it is not there). The box offset properties (top, bottom, left or right) specify where the element should appear in relation to its containing element.

Fixed positioning

The heading has been placed in the center of the page and 100px from the top of the screen (the rest appears in normal flow).

In the example below, the heading has been positioned to the top left hand corner of the browser window. When the user scrolls down the page, the paragraphs disappear behind the heading. The <p> elements are in normal flow and ignore the space that the <h1> element would have taken up. Therefore, the margin-top property has been used to push the first <p> element below where the fixed position <h1> element is sitting.

HTML

<body>
    <h1>Fixed positioning</h1>
    <p class="top">
        This is a form \(...\) down the page.
    </p>
    <p>
        In the example \(...\) sitting.
    </p>
</body>

CSS

h1 {
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 10px;
    margin: 0px;
    width: 100%;
    background-color: #efefef;
}

.top{
    margin-top: 100px;
}

Floating elements

Floating an element allows you to take that element out of the normal flow and position it to the far left or right of a containing box. The floated element becomes a block-level element around which other content can flow.

The heading has been floated to the left, allowing the paragraph of text to flow around it.

When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow).

In the example below, a <blockquote> element is used to hold a quotation. It's containing element is the <body> element. The <blockquote> element is floated to the right, and the paragraphs that follow the quote flow around the floated element.

HTML

<body>
    <h1>Floating elements</h1>
    <blockquote>
        I'm the quotest of them all
    </blockquote>
    <p>
        Floating an \(...\) content can flow.
    </p>
    <p>
        When you use \(...\) normal flow\).
    </p>
</body>

CSS

blockquote {
    float: left;
    width: 250px;
    font-size: 130%;
    font-style: italic;
    font-family: Georgia, Times, serif;
    margin: 10px 10px 10px 10px;
    padding: 10px;
    border-top: 1px solid #665544;
    border-bottom: 1px solid #665544;
}

You can use float to place elements side-by-side, if you e.g. would like a design with boxes next to each other.

When elements are floated, the height of the boxes can affect where the following elements sit. In the example below, you can see six paragraphs, each of which has a width and a float property set. The fourth paragraph does not go across to the left hand edge of the page as one might expect. Rather it sits right under the third paragraph. The reason for this is that the fourth paragraph has space to start under the third paragraph, but it cannot go any further to the left because the second paragraph is in the way.

HTML

<body>
    <h1>Positioning</h1>
    <p>
        ...
    </p>
</body>

CSS

body {
    width: 750px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
}

p {
    width: 230px;
    float: left;
    margin: 5px;
    padding: 5px;
    background-color: #efefef;
}

Setting the height of the paragraphs to be the same height as the tallest paragraph would solve this issue, but it is rarely suited to real world designs where the amount of text in a paragraph or column may vary. It is more common to use the clear property (discussed further down) to solve this.

Clearing floats

The clear property allows you to say that no element (within the same containing element) should touch the left or right-hand side of a box. It can take the following values:

  • left: The left-hand side of the box should not touch any other elements appearing in the same containing element.

  • right: The right-hand side of the box will not touch elements appearing in the same containing element.

  • both: Neither the left nor right-hand sides of the box will touch elements appearing in the same containing element.

  • none: Elements can touch either side.

In the example below, the fourth paragraph has a class called clear. The CSS rule for this class uses the clear property to indicate that nothing should touch the left-hand side of it. The fourth paragraph is therefore moved further down the page so no other element touches its left-hand side.

HTML

<p class="clear">
</p>

CSS

body {
    width: 750px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
}

p {
    width: 230px;
    float: left;
    margin: 5px;
    padding: 5px;
    background-color: #efefef;
}

.clear {
    clear: left;
}

Z-index

When you use relative, fixed or absolute positioning, boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sit on top of those that are earlier in the page.

If you want to control which elements sits on top, you can use the z-index property. Its value is a number, and the higher the number the closer that element is to the front. E.g., an element with a z-index of 10 will appear over the top of one with a z-index of 5.

PreviousHide boxesNextInheritance

Last updated