CSS Columns

The Float Property

• K12a - (time: 3:34)
  • Demo file
  • To create columns in CSS use the float property.
  • Floats allow you to put block elements to one side and have other content flow around them.
  • A float is often used for a sidebar. This page shows a div (the pink area) that became a sidebar using float: left;
  • Note that a floated element must precede the element it should be next to on the page.
  • Put the div of the float and the div of the main content into a container if you want to provide a background for the area outside the float.

Clear the float

• K12b - (time: 3:24)

  The following class is used to contain the float if it becomes too tall. The class should be placed on a div or break element after the close of the container that has the float within it:

  .clearfloat {
      clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
  }

  Here is how the class would be applied using a br element:

  <br class="clearfloat" />

Offsetting margin

• K12c - (time: 3:08)
  • If you do not create a margin between for the main content area, the non-floated content is taller than the float's, then the non-floated contents will flow under the float, defeating the illusion of columns.
  • To prevent this, put the main content into its own div and set its left (or right, if the float is to the right) margin to be a bit wider than the float's width.

Faux Column

• K12d - (time: 3:19)
• Reference image:
  • One of the few failings of css is its inability to easily create full height columns.
  • The background color of the nav will be seen only behind the content in the nav, the color will end where the content ends creating an empty space under the column if the column's contents are not as tall as the non-floated content, which is often the case with nav bars.
  • In order to create the illusion of a full height column:
    1. Make an image that is as wide as the column and the same color as the column's background.
    2. Apply it to the containing element.
    3. Set it to repeat-y
  • This creates the illusion of a full column height.

Multi-Column Layout With Header and Footer

Exercise

K12e - (there is a link below to written instructions, there are no video instructions)

• Open this file and follow the instructions under Your Assignment.
• This is what your page ought to look something like when you are done.

 

© 2014 Dan Hitchcock Vaughan and licensors