Create Columns with Floats

By: Zoe Gillenwater

Page 1 of 4

Set for printing

Next

In general, there are currently two ways to create a multi-column layout in CSS: absolute positioning or floating. The vast majority of the time, floating will be your method of choice in laying out your web pages with CSS. In this tutorial, you'll learn how to create the look of columns using the float, width and margin properties. In order to complete this tutorial, you need to already be familiar with the syntax of CSS and have read Flowing And Positioning: Two Page Models and Float: The Theory.

Why Not Absolute Positioning?

You may be wondering why floating is used for most CSS-based layouts, especially if you have gotten used to Dreamweaver writing CSS for you — it used to use absolute positioning extensively to place what it called "layers" (really divs) to precise spots in the window. The problem with absolute positioning is that it relies on a rigid set of circumstances to lay out correctly, and the web is not a rigid medium like print is. You have no way of knowing how large your user's browser window or font size is. When these values change, absolute positioning can have a hard time adapting, since absolutely positioned elements are removed from the document flow. They sit at their assigned spot on the page without any regard for other elements they may be overlapping, and other elements flow in their normal way without any regard for whether an absolutely positioned element is overlapping them. For instance, if you have a two column layout with the sidebar positioned absolutely, and you want to place a footer beneath both the sidebar and the main content column, you'll be out of luck: if the sidebar is longer than the main content column, it will blithely overlap the footer without blinking an eye.

Because of its rigidity, it's not recommend that you use absolute positioning as your method for the overall layout of site unless it is a very simple site indeed. Absolute positioning is fine for when you want elements to overlap, such as with popups or drop-down menus, or for when you want to position a specific element to a precise spot, such as pinning an icon to the bottom and right of a header div, but other than that, it should generally be avoided.

The main advantage of using absolute positioning is that you can place the positioned div anywhere in the source of the page and have it show up anywhere you want on the screen. This means you can optimize your content for screen readers and search engines so that the most relevant content, instead of a nav bar, for instance, comes first in the source. There are ways to optimize your source order with floats, but these techniques are more advanced than what is taught in this tutorial.

Let's move on to using floats to create columns instead.

Start with Structure

Before we can create any columns, we need to have some sort of structure in place that tells the browser what pieces of content we want to be grouped together into a column. This is the perfect use for the div element, a generic (X)HTML block-level element that can hold anything we like and has no semantic meaning of its own.

To see a sample div structure, download the support files for this tutorial by clicking on the download link at the bottom of any page and open the file float_columns.html in Dreamweaver. In Design View, you'll notice that there are two blocks of color: a yellow block sitting on top of a gray block. Each of these blocks is a div that has been assigned some very basic styling. Go into Code View to view the source of the page. Each div has a unique id attribute assigned that describes the type of content it contains.

<div id="secondary-content">
  <ul>
    <li><a href="#">Home</a></li>
  ...
</div>
<div id="main-content">
  <h1>About Us</h1>
  ...
</div>

With these divs in place and uniquely identified, we can turn them from blocks spanning the full width of the window to columns that sit side-by-side. Enter the floats.

Page 1 of 4 1 2 3 4 Next


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
CSS, cascading style sheets, styles, styling, floats, floating, widths, margins, columns, layouts, liquid, fluid, fixed, Internet Explorer, IE Three Pixel Text Jog, 3px Gap, bugs, wrapping, divs