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

Using simple the float:left property/value combo you can create simple 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 flows, e.g. something like the "web technology box" on top right of this page. However, since there wasn't any proper layout design language, designers now use the float property (and often also the position property) for creating layouts.

Creating a simple fluid three column layout is quite simple:

• Use a hierarchical structure tat defines all the big boxes: top, main (with left, center and right) and bottom.
• The left, center, right columns should use percentages and can't have any margins or padding.
• Use div id="xxx" for these 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.

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%;
    border: 1px dotted;
    }

#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;
}

Template:

• http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.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)