Optimizing 3 column design render order for SEO

Get Started
1

Hi all,

I’ve re-coded the CSS to allow a three column website design.

All visually looks well so far but as it stands I’m having to render the columns in the following order:

left column
right column
center column

Naturally this isn’t best for SEO as the vast chunk of the content found in the center column is last. If the left and right columns have a lot of content of their own there’s a risk the SERP’s won’t spider all the way down in the code to read the center column content.

If I reorder it so the center column gets rendered first followed by the left and finally right column, the design loses integrity.

Any ideas how I can force this to work correctly in all major browsers?

My CSS looks like this:

#left-body {
float: left;
width: 200px;
padding: 40px 48px 40px 47px;
margin: 0px -5px 0px -1px;
}
#left-body ul { padding-left: 20px; }

#center-body {
margin-left: 290px;
margin-right: 220px;
padding: 20px 28px 40px 27px;
text-align: justify;
}

#right-body {
float: right;
width: 150px;
padding: 40px 48px 40px 47px;
margin: 0px -5px 0px -18px;
}
#right-body ul { padding-left: 20px; }

Thanks in advance.

2

I’m using the following DOCTYPE:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

I got it to work well despite the width’s not adding up to 1144px which is the global container width. 200 + 584 + 180 != 1144 (964). Either the padding does the rest (haven’t added it up) or there’s some overlapping going on. At any rate I’ve tested it in IE8, FF 3.6, Opera 10.2, Chrome 5 and all looks good. Of course IE6 has a mind of it’s own adding extra padding thus corrupting the layout. I think I’ll just warn visitors with a popup or something to stop using IE6.

left-body needs the margin in there as otherwise any images that touch the left or right side of that column don’t align up well (small vertical gap). Maybe some tweaking with the padding can override this though last time I tried it wouldn’t work.

Here’s the CSS code that got it working:


#left-body {
	float: left;
	width: 200px;
	margin: 0px -5px 0px -1px;
	padding: 40px 48px 40px 47px;	
	text-align: justify;	
}
#left-body ul { padding-left: 20px; }

#center-body {
	float: right;
	width: 584px;
	padding: 20px 30px 40px 17px;	
	text-align: justify;	
}

#right-body {
	float: right;
	width: 180px;
	padding: 40px 20px 40px 10px;
	text-align: justify;		
}
#right-body ul { padding-left: 20px; }

#content-holder {
	float: left;
	width: 928px;
	overflow: hidden;
	margin-top: 10px;	
}

Thanks again for your help.

3

The margins and padding are there because of how IE6 needed them to render the page correctly.

As I’m deleting IE6 IF’s in the code I can probably remove padding altogether and just use margin:.

Thanks again.

4

I thought your margins and padding were a little overdriven or overcomplicated. I’m not sure what they’re being used for. You’ll need to be very careful adding up all the margins and padding of the inner elements. Add ugly background colours while playing around with this and/or use a tool like Firebug or Dragonfly to make sure everyone fits.

5

What you wrote makes a lot of sense and should work like a charm. Thanks.

Given that the margins are setup in the global container which would house the <main> container I assume <main> can be very basic as below and still work? …or is there anything I need to look out for to force browser compatibility?

#main {
width: 778px; (width of left + center column combined)
overflow: hidden;
}

Thanks.

6

The margins and padding are there because of how IE6 needed them to render the page correctly.

I’ve generally never gone that far for IE6, so I believe it’s very possible to simplify your code.

You have a full, complete, valid doctype? No comments or anything before the doctype to trigger quirks mode?

When floating boxes, there are some known bugs: 3px jog hits you when you have a float next to a non-float. 50% + 50% = 101% is another known bug.

If you get IE6 dropping a float when mathematically everything should fit, you could use any of the solutions Paul O’B posted in the Floats Sticky.

#element {
normal code;
}

  • html #element {margin-right: -6px;}

that kind of thing. Generally you should only need to do it once for a major layout like this.

Also keep an eye out for the double-margin float bug, but you’ve surely heard of it. If not, it’s in the thread linked above.

I hate math so personally I try to keep my margins/padding pretty simple whenever possible. : ) If a box doesn’t have any borders or background colours, padding and margin look identical, so I try to only use one (usually margin).

7

pseudo-code:

<body>
<main><– this is floated left and is as wide as center + left
<center-body/><– this one is floated right
<left-body/> <– this one is floated left
</main>
<right-body><–floated right
</body>

I dunno what you are able to do HTML-wise, but adding a container can make it easy for you to keep content-first.