CSS float tutorial

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

Learning goals

• Understand CSS float
• Be able to create simple layouts using floats

Prerequisite

• CSS box model tutorial

Concurrent

• CSS tutorial (summary)

Moving on

• CSS positioning tutorial
• CSS for XML tutorial
• DHTML

Level and target population

• Beginners

Teaching materials (Examples)

• http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html
• This page (some CSS demos included)

Remarks

• This tutorial is intended for students in a field that is technology intensive (e.g. computer applications or educational technology). For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).
• There are some inline examples. However, they had to be created in a away that makes them fit into a wiki page. I.e. we use inline style (something we usually don't advocate) and we also had to add extra styling properties.

Introduction

This is a green float

This is a yellow float

The float property was meant to create boxes around which other text can flow, e.g. something like the little green box to the right of this page. However, since CSS doesn't include any proper layout design language (like in XSL), some designers also use the float property for creating column layouts. As you can see by looking at the yellow and green boxes to the left and to the right, text will flow around.

Below is the code for both the float:left and float:right example

<p style="background-color:green; float:right; width:2.5cm">
 This is a green float
</p>

Simple float:left example (see the little yellow box to the left)

<p style="background-color:yellow; float:left: width:2.5cm; margin-right:0.2cm">
  This is a yellow float
</p>

"Real world" examples would be the floating "Incomplete" and "Web technology tutorials" on top of this wiki page.

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.

Now let us explain how floats can be used to create page layouts. The basic principle shall be illustrated with a simple hypothetical example: Imagine that you have two columns, one should go to the left and the other to the right. Floats, basically (1) tell an element to float horizontally (left or right) and (2) that other sibling elements or text of the parent element can float around. The latter feature isn't used for layout.

The HTML for a two column layout 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.
• Insert overflow:hidden; in the main container (i.e. the one that includes the floats, else (most) browsers will not compute its volume and borders and bottom margins may not be right.

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%;
    overflow:hidden;  /* Important CSS bad trick to give it volume */
   }

#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 ...). You can hide the borders of the offending box or include the bottom box in the central "text_col" box ...

Template you can use:

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

Let's recall the principle:

• Firstly we need to organise page contents in a good hierarchical div structure. The big div boxes defining top, main/middle, left, right and bottom need to be simple ! No margins, no borders, no padding !
• In order to include margins and paddings within these major boxes, used an embedded div. These are often called "tubing divs".
• Multi-column layout can be achieved with two tricks: Use "float:left" for each column and make sure that the total will fill the total width. The bottom element then should include a clear:both, i.e. it will be told not to float around the previous element.
• Deal with various IE bugs (not covered here).