This article originally appeared in the Design and Usability Tactics e-newsletter. Click here to subscribe automatically.

The placement of text content within a Web
page can make a significant difference in some situations. The most
notable example is in search
engine rankings
. Some search engines examine only a limited
number of characters (i.e., 10,000 characters or 25 KB) on each
page and ignore the rest of the text on any page that exceeds the
standard length. Search engines that index the entire contents of a
long page often give more weight to content that appears closer to
the top of the page when calculating page rankings and relevance to
a particular search term.

The sequence of page content is also
significant when a Web page appears as plain, unstyled text. That
might occur when viewing a page on alternate display devices, such
as a PDA or cell phone, or when a visitor uses assistive
technology, such as a screen reader.

Old-style table-based layouts with embedded
formatting didn’t allow Web builders much opportunity to alter the
order of the text in the page markup. The sequence of the page
elements was dictated by the page flow from left-to-right and
top-to-bottom. Modern structural markup combined with CSS styling
provides much more flexibility. As a result, Web builders often
have the option of rearranging blocks of page markup while
maintaining the same page layout in the browser window.

Let’s examine how we can rearrange the order of
the elements in a typical two-column page layout consisting of a
full-width header panel across the top of the page, followed by the
two-column section, and then a full-width footer at the bottom of
the page. The central two-column section includes a narrow
navigation column on the left and a wider column for content on the
right.

Two-column layout–the usual way

Because the natural flow of a Web page starts
at the upper left corner and flows to the right and down, it’s
usually a little simpler to create your markup in that order. When
you take this approach, placing the navigation links in the left
column pushes the main page content down in the page code as shown
in the code for Figure
A
.

The example code below uses CSS floats to
achieve the two-column effect. The div#head and div#foot rules set the
attributes of simple, full-width divs for the header and footer.
The div#foot rule
includes the clear: both
statement to make sure the footer stays below the main and nav
columns and doesn’t flow up to fill any empty space.

The div#navcol rule floats the
div containing the navigation links to the left and sets its width
to 20 percent, creating the left column. That leaves room for the
main text div to fill in the remaining space to the right. The div#main rule sets the left
margin to a value slightly larger than the width of the navcol div,
effectively creating a vertical column for the main content. I
described this technique in more detail in “Dealing
with differences in CSS floats in IE and Netscape
.”

Here’s the CSS code for the example:


body {
    margin: 0px;
    padding: 0px;
}
div#header {
    text-align: center;
    background-color: #CCCCCC;
    height: 60px;
    line-height: 60px;
}
div#navcol {
    padding: 10px;
    float: left;
    width: 20%;
}
div#main {
    background-color: #99FFFF;
    padding: 10px;
    margin-left: 22%;
}
div#foot {
    border-top: solid #000 1px;
    background-color: #CCCCCC;
    padding: 5px;
    text-align: center;
    clear: both;
}

As you can see below, the XHTML markup for this
example page follows the normal left-to-right and top-to-bottom
flow. The first div is the header, followed by the div for the nav
column, then the main content column div, and finally, the footer
div. (Note: For the sake of brevity, the nav column is shown as a
simple unordered list with no links, and the text in the main and
footer divs is shortened.)

<body>
<div id=”header”>
    <h1>Header Text</h1>
</div>
<div id=”navcol”>
    <h4>Nav Column</h4>
    <ul>
        <li>Lorem
ipsum dolor</li>
        <li>Consectur
elit</li>
        <li>Sed do
eiusmod tempor</li>
        <li>Ut
labore et dolore</li>
        <li>Ut enim
ad minim</li>
    </ul>
</div>
<div id=”main”>
    <h2>Main Content</h2>
    <p>Ut aliquip ex …
consequat.</p>
    <p>Lorem ipsum dolor …
incididunt.</p>
    <p>In reprehenderit …
incididunt.</p>
    <p>Ut enim ad minim …
voluptate.</p>
</div>
<div id=”foot”>
    <p>Footer text goes here. In
reprehenderit … laborum. </p>
</div>
</body>

Using a left float for the left column is a
workable solution to a two-column layout, but there are advantages
to having the main content appear above the nav column text in your
markup. Let’s try an alternative that makes that arrangement
possible.

Moving the main content up the page

One of the advantages of CSS is that you can
often use slightly different techniques to achieve the same (or
very similar) effect. The example code for Figure
B
uses an alternate technique for creating a two-column
effect that enables us to change the sequence of the divs in the
markup, thus bringing the main content closer to the top of the
page and moving the nav column text to a less prominent position
further down the page.

The technique is very similar to the one in the
previous example. However, instead of floating the nav column to
the left and allowing the main content to fill the space to the
right, it floats the main content column to the right and allows
the nav column to flow up into the empty space to its left.

In this case, the div#head and div#foot rules remain
unchanged. The div#main
rule floats the main content div to the right and sets its width to
75 percent. This creates the right column and leaves blank space to
the left of the main column. The div#navcol rule just creates
a little padding around the text. It doesn’t need a float attribute
because the normal flow causes the nav column to fill the empty
space to the left of the main content column.


body {
    margin: 0px;
    padding: 0px;
}
div#header {
    text-align: center;
    background-color: #CCCCCC;
    height: 60px;
    line-height: 60px;
}
div#navcol {
    padding: 10px;
}
div#main {
    float: right;
    width: 75%;
    background-color: #99FFFF;
    padding: 10px;
}
div#foot {
    border-top: solid #000 1px;
    background-color: #CCCCCC;
    padding: 5px;
    text-align: center;
    clear: both;
}

Creating the two-column effect by floating the
main content to the right and allowing the nav column to fill in to
the left allows us to rearrange the markup so the main content text
comes before the nav column text. The following XHTML markup is the
same as the previous example except that the order of the main and
navcol divs are reversed.

<body>
<div id=”header”>
    <h1>Header Text</h1>
</div>
<div id=”main”>
    <h2>Main Content</h2>
    <p>Ut aliquip ex …
consequat.</p>
    <p>Lorem ipsum dolor …
incididunt.</p>
    <p>In reprehenderit …
incididunt.</p>
    <p>Ut enim ad minim …
voluptate.</p>
</div>
<div id=”navcol”>
    <h4>Nav Column</h4>
    <ul>
        <li>Lorem
ipsum dolor</li>
        <li>Consectur
elit</li>
        <li>Sed do
eiusmod tempor</li>
        <li>Ut
labore et dolore</li>
        <li>Ut enim
ad minim</li>
    </ul>
</div>
<div id=”foot”>
    <p>Footer text goes here. In
reprehenderit … laborum. </p>
</div>
</body>

Simply moving the main content div up to a
higher position in the page markup can increase the weight that
some search engines give to that content. The result can be better
relevance ranking for the keywords within that text. The difference
would be small in the example pages above, but in pages where the
left column contains supplemental sidebar information or ads, the
difference in the page ranking could be significant.

For more tips by Michael Meadhra, visit our CSS & Design Dev Tips Library .