Keeping your content in order of priority with flexible CSS layouts.

This article shows you how to use CSS floats to achieve any column layout, while keeping your most important content highest on the page.

The web development community is becoming more and more conscious of the fact that content is king, i.e. how your website looks is of little importance compared to the words you use to deliver your message. But as well as the words used, another crucial but often overlooked issue is the order in which your content appears on the page.

Search engines scan pages from the top, and place the most importance on content which appears near the top of the page, and progressively less as they work their way down to the bottom.

So the content that is most relevant to what your page is about should come as close to the top of the page as possible.

by Dan Johnson

First things first

Obviously you can’t just launch straight into paragraphs of text right at the top of your page, or your users won’t know where they are and will be unlikely to read on. Normally the first things on your page will be a logo image which links back to the homepage, followed by your main navigation, and possibly some interactive elements such as search or login forms.

These initial elements allow the user to establish what site they are on, and to quickly see the main sections they can navigate to. Immediately after these elements, you should place your main content section, and only after that, any additional content which is of less importance, such as secondary navigation, extra links, buttons, ads etc.

Content order can be independent of page layout

Using CSS floats, it’s actually possible to achieve (almost) any layout you can think of. As shown in the following examples, two pages with the exact same HTML markup (except for a necessary extra div in the last one) can be displayed in completely different layouts by the clever use of CSS styles.

The HTML markup

<div class="example-layout">
	<div class="example-header">
	    Page Header
	</div>
	<div class="example-content">
		<div class="primary">
			Primary Content
		</div>
		<div class="secondary">
			Secondary Content
		</div>
		<div class="tertiary">
			Tertiary Content
		</div>
	</div>
	<div class="example-footer">
		Page footer
	</div>
</div>

I’ve defined some common styles so you can easily see the placement of the content:

  .example-layout {width: 80%; margin-left: 10%;}
  .example-header, .example-footer {border: 1px solid #999;}
  .example-footer {clear: both;}
  .primary {background: #FBA95E; height: 6ex;}
  .secondary {background: #FFE08F;}
  .tertiary {background: #FFFABF;}
  .example-header,
  .example-footer,
  .primary,
  .secondary,
  .tertiary {padding: 10px 2%; margin: 5px 0;}
  .example-content {padding: 0; overflow: hidden;}
  .primary, .secondary, .tertiary {margin-top: 0;}

Single column

This is the easiest way to keep your main content near the top of the page, simply let the additional content stack beneath it. No floating required, the order your content appears in the HTML is the order it will appear on the page.

Two columns

You can easily position your main content to the left or right of the secondary content by using floats:

Main content on the left

  .two-left .primary {float: left; width: 60%; margin-right: 2%;}
  .two-left .secondary {float: right; width: 30%;}
    /* 60% + 30% + 2% + 8% padding = 100% */
  .two-left .tertiary {clear: both; width: 100%;}

Main content on the right

  .two-right .primary {float: right; width: 60%; margin-left: 2%;}
  .two-right .secondary {float: left; width: 30%;}
    /* 60% + 30% + 2% + 8% padding = 100% */
  .two-right .tertiary {clear: both; width: 100%;}

Three Columns

Main content on the left

  .three-left .primary {float: left; width: 40%; margin-right: 2%;}
  .three-left .secondary {float: left; width: 22%; margin-right: 2%;}
  .three-left .tertiary {float: left; width: 22%;}
    /* 40% + 44% + 4% + 12% padding = 100% */

Main content on the right

  .three-right .primary {float: right; width: 40%; margin-left: 2%;}
  .three-right .secondary {float: right; width: 22%; margin-left: 2%;}
  .three-right .tertiary {float: right; width: 22%;}
    /* 40% + 44% + 4% + 12% padding = 100% */

Main content in the centre

Note: This layout requires an extra div (class=”wrap”) to be placed around the primary and secondary content and floated left, in order for the primary content to be floated right within it.

<div class="example-layout">
	<div class="example-header">
		Page Header
	</div>
	<div class="example-content">
		<div class="wrap">
			<div class="primary">
				Primary Content
			</div>
			<div class="secondary">
				Secondary Content
			</div>
		</div>
		<div class="tertiary">
			Tertiary Content
		</div>
	</div>
	<div class="example-footer">
		Page footer
	</div>
</div>

  .three-middle .wrap {float: left; width: 70%; margin-right: 2%;}
  .three-middle .primary {float: right; width: 58%; margin-left: 2%;}
  * html .three-middle .primary {width: 57%; margin-left: 1%;}
    /* solves percentages issue in IE6 */
  .three-middle .secondary {float: left; width: 32%;}
  .three-middle .tertiary {float: right; width: 24%;}
    /* 70% + 2% + 24% + 4% padding = 100% */

• Tweet