CSS positioning tutorial

Draft

<pageby nominor="false" comments="false"/>

Introduction

Positioning an layouting with CSS is one of the most difficult chapters

• The whole model is very complex with respect to how various properties interact
• You will have to fight browser implementation issues (e.g. IE bugs, though IE 9 seems to do quite well now - Daniel K. Schneider 23:04, 13 November 2011 (CET))

Simple fluid layouts using the float property

Maybe you don't need positioning ! Using simply the float:left CSS property/value combo, you can create simple fluid column layouts. We shall discuss an example that shows how to create a page with a heading box on top, a main body with three columns and a footing box.

Originally, the float property wasn't mean for creating layouts. It was meant to create boxes around which other text can flow, e.g. something like the "web technology box" on top right of this page. However, since CSS doesn't include any proper layout design language (like in XSL), some designers now use the float property for creating column layouts.

The basic principle is the following as we shall explain with a simple hypothetical example: Imagine that you have two columns, one should be to the left and the other to the right.

HTML would look like this:

<div id"container">
  <div id="left_col">
  ... Contents of left column ....
  </div>

  <div id="right_col">
  ... Contents of right column ....
  </div>
</div>

The CSS looks like this:

#container {}
#left_col  {float:left; width:49%;}
#right_col {float:right; width:49%;}

The CSS alo might look like this, i.e. the second (right) box would float against the first one.

#container {}
#left_col  {float:left; width:49%;}
#right_col {float:left; width:49%;}

Life examples:

• css-left-right-boxes.html
• css-left-right-boxes2.html

Let's now have a look at a more real example, i.e. a page that has something on top, followed by a threee column part, follwed by a bottom. Creating such a fluid three column layout is quite simple:

• Use a hierarchical structure that defines all the big boxes: (1) top, (2) main and (3) bottom. The "main" box includes (2a) left, (2b) center and (2c) right.
• Define the width of these (2a) left, (2b) center, (2c) right columns with percentages and do not use any margins borders, or padding. If you do need margins etc., insert yet another div inside these divs.
• Use div id="xxx" for all major layout boxes, and div class="yyy" for content boxes that go inside (this way you can fill the columns with several boxes).
• After using a float:left, insert clear:both in the next div if you don't want the next div to float around. E.g. we use one for the bottom div.

Example:

• http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html

This page has the following layout:

Div layout structure

The CSS is included in the example HTML page. Look at its source. Its most important elements are:

#top {
      border: 1px solid;
 }

#main {
    float: left;
    margin-top: 1cm;
    margin-bottom: 1cm;
    width: 100%;
    }

#left_col {
    float: left;
    width:17%;
    min-width: 112px;
    /* When using borders, you have to adjust percentages
       You can uncomment these just for debuggin boxes
       */
    /* border: 1px dotted; */
}

.left {
    border: 1px solid;
    margin-bottom: 2px;
}

#text_col {
    float:left;
    width: 66%;
    min-width: 4cm;
}

.text { 
    background-image: url(tree_silhouette.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left:1%;
    margin-right:1%;
    border: 1px solid;
    padding: 1em;
 }
 
#right_col {
    float: left;
    width:17%;
    min-width:2cm;
}

.right {
    border: 1px solid;
    border: 1px solid;
    margin-bottom: 2px;
    }

#bottom_padding {
    clear: both;
    border: 1px transparent;
}

#bottom {
    margin-top: 1cm;
    border: 1px solid;
}

Remarks:

• Numbers in the yellow boxes just show the order in which we defined our div's in the HTML
• This page will not correctly display in IE 9 (clear:both will not clear the "main" box, but the right column ...).

Template you could use:

• http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html

Basic positioning

Each HTML can be positioned with the left, right, top and bottom properties. Each of these properties defines a distance between this element and either the next element or the parent's border.

Example:

 top: 1cm; 
 left: 1cm;

Example:

 right: 1cm;
 bottom: 1cm;

Let's now look at a very simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>CSS background demo - First principles of instruction</title>
  <style type="text/css" media="all">
#container {
             position:relative;
             }
#left_col  {
             border:solid thin; position:absolute; 
             top:0.5cm; left:0pt;  width:49%;
             }
#right_col {
             border:solid thin; position:absolute; 
             top:0.5cm; right:0pt; width:49%;
             }
  </style>
</head>

<body>
<div id="container">
  <div id="left_col">
  ... Contents of left column ....
  ... Contents of left column ....
  </div>

  <div id="right_col">
  ... Contents of right column ....
  </div>
</div>

</body>
</html>

Life example:

• http://tecfa.unige.ch/guides/css/ex/layout/css-left-right-boxes3.html

To do

I probably will translate, repair and expand this old example (in french): http://tecfa.unige.ch/guides/css/ex/boxing0.html

In the meantime, please have a look at other tutorials, some of which are listed in the links section.

Links

CSS Positioning tutorials

• Learn CSS Positioning in Ten Steps (BarelyFitz Designs).
• CSS Positioning (W3Schools)
• CSS Layout (HTML Source : HTML Tutorials)
• CSS Positioning (CSS discuss wiki)
• Positioning, part of CSS Layout and formatting (Sitepoint)
• Multi-Column Layouts Climb Out of the Box (A list Apart)
• CSS Positioning 101 (A list Apart, 2010).

- Daniel K. Schneider 19:22, 8 September 2009 (UTC)