Is this even possible? I can't figure out a way.

[jlizarraga]

Hi all,

So our SEO guy came back from Pubcon with a lot of valuable SEO rules, one of which being to put your content at the top of the markup and your header/nav/etc at the bottom of your markup, then use CSS to position them back to the correct order.

The problem is, we have paragraphs of SEO text on our pages that are dynamically generated and have different heights with every page load. Couple this with a page where the main content's height is also dynamic/variable, and my brain freezes up.

A simple example:

Markup without SEO optimization:


<div id="container">
<div id="nav">Nav</div>
<div id="content">
<div id="pageContent">
[dynamically generated page content]
</div>
<div id="seo">
[dynamically generated seo content]
</div>
</div>
</div>

Markup with SEO optimization:


<div id="container">
<div id="content">
<div id="seo">
[dynamically generated seo content]
</div>
<div id="pageContent">
[dynamically generated page content]
</div>
</div>
<div id="nav">Nav</div>
</div>

Is it possible (with just friendly CSS, no JS or expressions) to correctly position these elements back to their non-optimized order when two or more of them have variable heights like that?

I'm stumped. :confused:

Any tips greatly appreciated!

[Medyman]

As long as your nav div has a definite height, you could apply a top-margin to the seo div then absolutely position the nav div inside the container div. The container div would need to be relatively positioned.

Side note: The technique you're using breaks with basic web norms which has accessibility implications. If you have good, useful, usable content and a well built site, I'm of the opinion that these sorts of SEO manipulation isn't necessary.

[jlizarraga]

Thanks for the reply. :)

In your solution, the top-margin for #seo would need to be the combined height of #nav and #pageContent, right (as #pageContent needs to be on top of #seo visually)? Or am I missing something?

[knives_out]

position #content as relative.

keep the #nav in the content .. below seo & page content

position your #nav (fixed pixel height) as absolute and give it top: -XXpx ... with XX being the fixed pixel height of #nav.

[xahx]

i agree with medyman :)

[jlizarraga]

I appreciate the responses, but your solutions only work when the height of one div is unknown. I have to completely reverse the order of these divs, and only the nav has a fixed height.

After a conversation with the SEO guy, we determined that in these situations the only way to reverse the order of these dynamic-height divs is with Javascript, and we're not going to worry about people without it.

I also agree with Medyman, but I don't have a say in this situation.