1. Technology

Prioritize Your Content and Put Important Stuff First Using CSS Float for Layout

Learn How to Use CSS Float to Put Important Content First in HTML


CSS Layouts Help Search Engines Read Your Pages Efficiently

One of the major benefits to using CSS for layout is that you can design your Web page and then put the HTML together so that the most important content comes first. This is important for SEO because most search engines weight the content towards the top of the page more than content towards the bottom. Search engines do this because they are not human. They can't just look at a Web page design and pick out the most important part. They are programmed to read HTML, while we look at the results of the HTML.

So if you create a page where the HTML has the main content first, it is set up to be most efficient for the search engine robots. But most of the time, we don't want a layout that is a single column of content. That's where CSS comes in. You can use CSS and divisions on your page to define your layout in many different ways.

The Basic HTML

This is the HTML that you'll use to create 6 different layouts:

<div id="layout">
  <div id="header">Page Header</div>
  <div id="content">
  <div class="wrap">
    <div id="first">
      This is the main content for the Web page.
    <div id="second">
      This is secondary content, like navigation or sidebars.
    <div id="third">
      This is tertiary content, like sidebars or extras.
  <div id="footer">Page Footer</div>

Basic CSS for the Layouts

There are a few things that I include in the CSS so that you can see the layouts more clearly. I color the blocks, add some margins and padding, and put a border around the header and footer. Also, I always zero out the margins, padding, and border so that all browsers are starting from the same place in the window.

/* browser resets */
html, body { margin:0; padding:0; border:none; }
/* defining styles */
#layout { width:75%; margin-left: 5%; }
#header, #footer { border: 1px solid #ddd; }
#footer { clear: both; }
#first { background: #fff07b; }
#second { background: #deff7b; }
#third { background: #9cff7b; }
#header, #footer, #first, #second, #third { padding: 2em 2%; margin: 1em 0; }
#content { padding: 0; }

If you do nothing else to the page, you end up with a basic 1-column layout. The main content is first, followed by the secondary and tertiary content. See the 1-column layout.

Don't Forget the Padding

Pay close attention to the paddings on the elements you're going to position. Padding, as you know from the CSS box model is included in the width of an element. So in order for all your elements to fit correctly, your padding and widths must add up to 100% (or less).

Two Column Layouts with CSS Float

To create a two column layout, you would set the width of the first and second elements to be 100% and then float them to line up next to one another. Then the third element would line up below them.

To put the main content on the right, add this CSS:

/* position the columns */
#first { float: right; width: 60%; margin-left: 2%; }
#second { float: left; width: 30%; }
#third { clear: both; width: 96%; }

Or on the left:

/* position the columns */
#first { float: left; width: 60%; margin-right: 2%; }
#second { float: right; width: 30%; }
#third { clear: both; width: 96%; }

As you can see, the width of the third element is only 96% because it has a padding of 2% on the right and left sides. If you set the width to 100% the third element will be wider than the rest of the page.

See the 2-column layout on the right and left.

Three Column Layouts with CSS Float

Putting the main content on the left or right side of three columns works the same as with two columns. Just float everything left to put the main content on the left side and float everything right to put it on the right side. When you're setting the width of all your elements remember paddings. If you set up a three column layout and things are not lining up right, check that your widths plus padding is equal to 100% or less.

The CSS for three columns with the main column on the left is:

/* position the columns */
#first { float: left; width: 40%; margin-right: 2%; }
#second { float: left; width: 22%; margin-right: 2%; }
#third { float: left; width: 22%; }

And on the right:

/* position the columns */
#first { float: right; width: 40%; margin-left: 2%; }
#second { float: right; width: 22%; margin-left: 2%; }
#third { float: right; width: 22%; }

You know the widths are right because of math:

40% + 22% + 22% + 4% (margins) + 12% (2% padding on right and left of 3 elements) = 100%

If you want to make the columns uneven, just change the widths. But make sure it all adds up to 100%

Three Columns with Content in the Middle

This is where it gets a little tricky. If you were paying attention, you would have noticed that in the HTML is an extra div with a class on it (class="wrap"). This div surrounds the main and secondary columns. And it is what allows you to put the main column in the middle.

For this layout, you treat the "wrap" division as one column, with two columns inside it. Then you float the third column beside the wrap column.

The CSS looks like this:

/* position the columns */
.wrap { float: left; width: 70%; margin-right: 2%; }
#first { float: right; width: 58%; margin-left: 1%; }
#second { float: left; width: 32%; }
#third { float: right; width: 24%; }

Note that the widths are slightly changed because of the wrap element. And you need the margin at 1% for the first element, so that IE6 will play nicely with this layout.

See the 3 column layouts: left, right, and middle.

©2014 About.com. All rights reserved.