CSS positioning tutorial

This article or section is a stub. It does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

Draft

Web technology tutorials series
Intermediate

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).

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