FRANK'S
TUTORIALS

HOW TO POSITION IN CSS v. 3.1

Positioning divs — or rather: elements — in CSS is not as hard as it seems, if you know your tools. There are a number of positioning tools, quite a few more than just the position declaration, which will all be covered here. If you understand matters described in this article, or if you first want to learn how to center in CSS, go on to How to Center in CSS. There also is an article on how to get 100% height, or how to create a sticky footer as it is usually called, which you can find here: Create a Fixed ('Sticky') Footer With CSS.

But for all articles counts that first you have to know the meaning of a few terms, which are explained below. I assume that you have a basic understanding of HTML and CSS. If not, you might want to do the beginners courses of W3 Schools first.

  • Sibling elements have a brotherly (sisterly) relationship with each other, versus those with a parent-child relationship. A child element is positioned inside a parent element, and is therefore also called a nested element. Sibling elements are of the same hierarchical order, parent and child element are not.
  • By nature, all block-level elements start on a new line on the canvas, under the preceding element. Their counterparts, inline elements, stay on the same line if there is space. Block-level elements are <div>, <p>, <h1> through <h6>, all lists and their items, <table>, <blockquote> and <form>. Inline elements are <span>, <a>, <img> and <input>. See here for a more comprehensive list of inline elements and their behavior, and here for the block-level elements. Block-level elements are also simply called block elements.
  • An element being in the flow means that its position will be honored by the next element. If an element is taken out of the flow, the next sibling will position itself as if its preceding sibling isn't there (anymore). The elements can therefore be superimposed on each other.
  • An element being positioned relative to is something else than having a position:relative. For example, an element being positioned relative to the canvas simply means that we start counting from the browser window inner edges, if we're looking at a computer screen.
  • As implied, an element can have a position declaration, which can have four values: static, relative, absolute and fixed. Such a declaration does not automatically mean that it is being positioned differently. To be positioned differently, a position value other than static is necessary, plus a left, right, top or bottom declaration (we will call this an LRTB declaration). Elements with a position:relative or :static (=default) stay in the flow, elements with a position:absolute or :fixed are taken out of the flow.

The positioning tools are the following:

  1. Float
  2. Display:inline
  3. Position:
    • relative
    • absolute
    • fixed
    • Nested position: absolute
    • Nested position:fixed
  4. Margin
  5. Padding
  6. Text-align
  7. Background-position

1. Float

With float we can line up sibling block-level elements horizontally, and we can position elements on the right-hand side. Float has three possible values: left, right and none. Float:right has the effect of the element saying: "Next sibling element, come to the left of me while I position myself as far right and as high as possible within our parent element; if there is not enough space on the left-hand side, get under me." For this effect to be rendered cross-browser reliably, that next element also has to have a float declaration.

Float:none should not be used because under several circumstances there are significant rendering differences between IE6/7 and other major browsers. What should always be used is the float-related property named clear, with the values left, right and both. That neutralizes the float influence.

To avoid unwanted behavior of later elements and to avoid browser rendering differences, a float declaration should always be maintained (repeated for every next sibling element) until cleared. There should never be an open end to a float, not even if the floated elements are all nested.

If necessary, use an empty div or other element with a clear declaration to neutralize it, either directly after the floated elements, or directly after the closing tag of the parent element. The floated elements and the clearing element do not have to be of the same hierarchical order. Some people advocate to clear a float by using a side effect of overflow:auto, but that makes the code less intuitive and deprives you of the ability to regulate the overflow.

An element under the influence of a float declaration no longer stretches out over the full available width, if that is what it normally does, but wants to stay as small as possible. It is said that it gets a shrink-wrap. To counteract that, a width declaration is necessary.

2. Display:inline

With display:inline we can also line up sibling block-level elements horizontally. However, other than in the case of float, these elements do not just get a shrink-wrap, but also become totally irresponsive to width declarations. They can only get wider if the contents grow or if padding is added. Also, they become sensitive to spaces in the code, which makes code formatting difficult. The latter also counts for display:inline-block. All in all, you should only use this positioning method under special circumstances.

3. Position:

With position we can get several effects, depending on whether the element has a position:absolute, relative, fixed or a nested position. If an element has a position:static, which is the default value, it is not responsive to LRTB declarations.

  • relative
    If you give an element a position:relative and e.g. top:-20px, it will simply be shifted 20 pixels upward from its original position. However, the next block-level element of the same hierarchical order will be positioned as if its preceding sibling is still in its original place, so a vertical gap of 20 pixels will be formed. If you want the next block-level element to follow that shift, you should use a negative margin (see later).
  • absolute
    If you give an element a position:absolute and e.g. left:100px, it will be positioned 100 pixels right of left canvas edge. A declaration left:-100px will move the element left of the canvas edge with 100 pixels, even it this means that it will become invisible.

    Elements with position:absolute are taken out of the flow, so in terms of space they don't exist anymore for the next element. However, they do automatically get a higher z-index, so the next sibling will be positioned behind it. If an element has been given a position:absolute but no LRTB declaration, it will stay positioned relative to the previous element, but it is still taken out of the flow.
  • fixed
    Position:fixed has a partly different effect from position:absolute. It has in common with :absolute that such elements are taken out of the flow. However, an element with :fixed will stay in the determined place when the page is scrolled. Also, its LRTB values are relative to the canvas, not to a possible parent element. Furthermore, Internet Explorer (IE) 6 by nature does not support position:fixed, and other IE versions require the standards mode for it (vs. the quirks mode).
  • Nested position:absolute
    An element with a position:absolute plus a LRTB declaration will stay/be positioned relative to its direct parent element if that parent element has a position declared other than :static. Without such a position declaration it will be positioned relative to the canvas.
  • Nested position:fixed
    An element with a position:fixed without a LRTB declaration will stay positioned relative to its direct parent element if that parent element has a position declared other than :static. That is the same as with position:absolute. However, any LRTB values will always be relative to the canvas.

4. Margin

An element with a margin-left:100px will be moved to the right 100 pixels (unless it also has a margin-right of 100 pixels). A margin-left:-100px will move the element to the left 100 pixels, even if it means that it will go off the canvas. The same counts for a negative margin-top. The next sibling element will follow the shifting. (Compare with a position:relative with a LRTB declaration, which shifting is not followed.)

5. Padding

In many (combinations of) elements, we can move the contents by adding padding. For example, in


    <h4 style="padding-left:100px;">Hello world</h4>

the text is moved to the right with 100 pixels. Do make sure that the containing element offers enough space, or the contents will extend beyond it. Negative padding values are not rendered.

6. Text-align

With text-align, which can have the values left, center and right, we can do two things. The first is position text within text block elements such as <p>, <h1> through <h6> and <li>. It is important to note that it is not the text block element itself that is positioned, but the text within. Because the text-align property is inherited, you can declare it for the text block element or for its parent block element.

The second thing we can do with it is position inline elements within block elements, such as an image in a div. For that, you need to declare it for the parent element.

7. Background-position

As the term suggests, with background-position we can position the background image of an element, which can come in handy if you want to position an image. The syntax is as follows: background-position: [horizontal value] [vertical value]. The values can be left, center, right (horizontal) and top, center, bottom (vertical). For both values relative and absolute measures (percentages, ems, pixels, etc.) can be used as well.


Change log
V. 2.0: added explanations regarding position declarations and negative margin; rephrased a number of matters; corrected important error regarding position:fixed; made the CSS properties and values stand out better in the text.
V. 3.0: added display:inline, text-align and background-position.
V. 3.1: re-formatted CSS code snippets in the text.


About
I am Frank Conijn, a web designer and author from Amsterdam, the Netherlands. At the moment, I am too busy with other web projects to be making websites for others, but I am available if you want to hire me for problem solving or advice. Just mail me at f.conijn@conijnbotFoolconsultancy.com.

Was this article helpful and do you have any Google account? A Google recommendation of my business, by means of simply clicking this button, is appreciated:

For general comments on and suggestions for this article, mail met at the above address. For free help with minor problems, post your question on one of these web design forums (pop-up).