WordPress SEO Holy Grail CSS 3 Column Layout

Comment on WordPress SEO by SEO Dave.

That’s not a layout with a sidebar dropped below the main content, that’s the same as how Talian/Stallion loads it’s AdSense ad code, just simple floats.

The way it’s done on that page is not going to be possible with a WordPress theme to have a sidebar where you want it, the actual end product might be possible, how they probably do it, no.

What they have probably done (without looking at the code in detail) is add a couple of floated divs one to the left and one to the right, that’s really easy to do when you have the same layout over the entire site, but you don’t on a WordPress site because you have archives. Where would you add simple floated divs on archive pages?

As a side note this entire site is filled with left and right floating content, all the widgets with thumbnails are left/right floats, even your Gravatar image is floating (I use float a LOT).

That’s why you’d have to add some nifty CSS coding I mentioned before, creating an empty block of code within the main content area that you either absolute or relative position the other code (your right sidebar) over this empty block. See the empty block to the right, I had to set the height to 200px, not even sure you’d be able to use this as the height needs to be variable and not set.

As it happens I use this sort of floating code in my SEO themes so the content is loaded code wise before the sidebars. If you view source of Talian and Stallion you’ll find code wise it’s

Head
Content
Right Sidebar
Left Sidebar
Footer

This is the code layout for all Talian/Stallion settings (doesn’t matter which Stallion layout is used, the positioning is CSS based).

With Stallion some of the head code is also below the footer:

Head
Navigation links
Content
Right Sidebar
Left Sidebar
Footer
Head some navigation links – they are positioned over the header code
A header widget area

It’s based on a Holy Grail CSS 3 Column Layout (do a Google search or two for Holy Grail CSS 3 Column Layout).

What you see on page in Talian and Stallion with a left and right sidebar

Head
Navigation links
Left Sidebar
Content
Right Sidebar
Footer

It was difficult to achieve this with Talian, basically put sidebars code wise after the main content, had the left sidebar float left, content float right and right sidebar float right (something like that, they were three floats :-)).

It was unbelievably difficult to achieve with Stallion because Stallion wasn’t fixed with a left and right sidebar, the sidebars can be stacked using CSS which meant the ‘standard’ Holy Grail CSS 3 Column Layout didn’t work.

I forget exactly how I did it with stallion (took hours of trial and error to get right because I couldn’t find a similar example online) basically each of the 12 Stallion layouts has their own layout CSS file and the codes different for the main layouts left/right, all left, all right, no sidebars.

More I think about this harder it seems with Talian or Stallion without a major redesign that would strip the SEO layout of sidebars below main content code wise. If you forget about keeping the sidebars code of Talian below the main content I’m sure this is relatively easy. Talian code layout would be something like:

Head
Left Sidebar
Main Content
Right Sidebar
Footer

David