Layout vs. Content Placement

If content is king, then indeed placement of content on a page is must also be important. Here is a little trick to make sure your content is always first and foremost for crawlers yet not to disturb your layout and design.

This tutorial will cover very little about the pre-made layout but rather how to alter it in a way that will push our sites content to the top in order for search engines to crawl your content faster.

So to begin here is our pre-made standard two column layout.

<!DOCTYPE">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Layout vs. Content Placement with CSS</title>
</head>

<body>
    <div id="wrapper">
		<div id="header" class="row">
        <h1>Header</h1>
        </div>
        <div id="content" class="row">
            <div id="leftCol" class="col">
            	<h2>Left Column</h2>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
            </div>

            <div id="rightCol" class="col">
                <h2>Content</h2>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <h2>Content</h2>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                <h2>Content</h2>
                <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </div>
        </div>
        <div id="footer" class="row">
        <h3>Footer</h3>
        </div>
    </div>
</body>
</html>
body { text-align:center; }

h1, h2, h3 {
    margin:0; 
    padding:0;
}

.row {
    border:1px #000 dotted; 
    float:left; 
    width:100%;
}
#wrapper {
    width:750px; 
    text-align:left; 
    margin-left:auto; 
    margin-right:auto;
}

#header { 
    height:100px;
}

.col { 
    border:1px #000 dotted; 
    margin-top:10px; 
    margin-bottom:10px;
}

#leftCol {
    float:left; 
    width:240px; 
    margin-left:10px;
}

#rightCol {
    float:left; 
    width:475px; 
    margin-left:10px;
}

Lets see what we have.

Perfect, now lets study this traditional layout idealism if you will.

In the above HTML and image you see that the header comes first then our two column content blocks and finally out footer. In most cases our header will contain a navigation menu with many links and sometimes account information links. In the eyes of a crawler the header and all its links and menus almost seems like a mini site map that in a lot of cases, contains links that are very minimally relevant to the topic or page at hand.

So I ask you, wouldn’t it be nice to be able to flip the positions of the header and the content blocks in the eyes of a search engine crawlers so that our content comes first, then our header and links, and finally our footer? How would we do such a thing without disturbing our layout?

Simple my friends we will use the magic of CSS positions to trick our browsers into placing our header above our content block.

First lets move the html content block above our header like so:

<div id="wrapper">
    <div id="content" class="row">
        <div id="rightCol" class="col">
            <h2>Content</h2>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <h2>Content</h2>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <h2>Content</h2>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div id="leftCol" class="col">
            <h2>Left Column</h2>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>...
        </div>
    </div>
    <div id="header" class="row">
    <h1>Header</h1>
The probability of being affected by erectile dysfunction in viagra prices  United States. Moreover, it's shipped to you by mail; hence, you ought to abstain from consuming greasy nourishment and liquor as both will influence the retention of the medication into your framework.  tab viagra It works commander viagra  in increasing blood flow to all of your body organs. This can be a real eye-opener and can become a very effective way of knowing what it is one  viagra without prescription canada is buying.     </div>
    <div id="footer" class="row">
    <h3>Footer</h3>
    </div>
</div>

Now lets see what we have here:
twoColFig1

Just as suspected now our header is below our content block and this is just not going to work for us. So lets move back up to our CSS and give some positioning rules to a few elements.

First things first, we are going to give our “#wrapper” style rule a position of relative:

#wrapper {
    width:750px; 
    text-align:left; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative;
}

Next lets give our “#header” style rule a position of absolute and a top left of zero pixels:

#header { 
    height:100px; 
    position:absolute; 
    top:0px; 
    left:0px;
}

Great so what we have done is gave both our header element a position of absolute to break it out of the flow of our design so we can place it where ever we like. We also gave the parent a position of relative to stop the header element from breaking out of the flow of our design any further than this point.

Great lets take a look-see at what we have done now shall we:

twoColFig2

OOPS, it seems to be that our header and content block are now overlapping each other! Ok to be honest I knew this was going to happen but I wanted to show you what happens when you use a position of absolute to break an element out of the flow of design. Now that the header is no long part of this “block like structure” of its sibling elements, they can overlap each other.

How do we fix this? Simple, lets move back over to our “#wrapper” element and give it a padding top style that equals the same height as our “#header” element.

#wrapper {
    width:750px; 
    text-align:left; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    padding-top:100px;
}

What we have done here is told our “#wrapper” element to push down all elements who follow our layouts flow down from the top by 100 pixels or again the same desired height as our header.

look and see what our results are:

twoColFig0

Great so now with CSS we have made it appear as if our layouts structure is header, content then footer but in reality we have our content before all other elements. Here is what this would look like to a crawlers entering the page looking for content relative to the pages topic.

twoColFig3

Wow this is perfect, but hmm something still bugs me. The left and right columns could be flipped as well beings that in most scenarios the right column will contain the meat or rather more relative type of content to a pages topic. So how would we go about flipping these two?

Instead of using position rules, we can look at the float side of this technique if you will. Its kinda a rule of thumb here tha when we are trying to move elements or rows up or down over or under each other we want to use positions, but for columns that site next to each other it much better to use floats.

To begin simple change the “#rightCol” rule’s float and margin-left to right like so:

#rightCol {
    float:right; 
    width:475px; 
    display:inline; 
    margin-right:10px;
}

Now that we have gave specific rules to both the left and right columns to either float left or right, believe it or not we can flip then in any order we want now. So go back to these two elements flip them so the right column comes for the left column like so:

<div id="rightCol" class="col">
    <h2>Content</h2>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <h2>Content</h2>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <h2>Content</h2>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div id="leftCol" class="col">
    <h2>Left Column</h2>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
</div>

Let see our results:

twoColFig0

Everything looks great from the layout or rather visual side of things, lets see how we did on the structure side of things:

twoColFig4

PERFECT! Both structurally and visually sound right? …

IE Fix

Now IE rears its ugly head yet again with a common bug that I need to point out. First this is a technique not a method set in stone, each layout will have its differences and challenges, but all should be able to work their way into this solution.

Most layouts will make use of floats and widths of a 100% in their row elements. IE however when having sibling elements who use floats and widths such as this while also trying to also utilize a position of absolute will make this positioned element disappear from the layout. Good news is that its only in version IE5 and IE6, the even better news is there is a CSS solution to this bug.

Again because the header element is trying to use a position of absolute while its sibling elements use floats and widths, IE5 and IE6 will hide the header from view. The solution is to isolate these two browsers from using floats on our sibling elements by going to the “.row” class in our css and give “!importance” to all other browsers to use floats and for IE5 and IE6 to now use floats like so:

.row {
    border:1px #000 dotted; 
    float:left !important; 
    float:none; 
    width:100%;
}

I only wanted to point this bug out to you because as I stated each layout will have its own unique challenges, and this seems to be the most common bug you will run into first so it’s always help full to know why if not when this occurs to you.

And that’s Layout vs Content Placement everyone!

Devin R. Olsen

Here is a working example of what this tutorial covers.

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:TwitterFacebookGoogle Plus