Looking For CSS Style To See Bottom Content First In Page Source

Im wandering If someone can help me to find info about how you setup a div style with css so that your seo friendly content loads first in the page source while your featured stuff that you want to display to visitors is visually appearing at the top.

If its as simple as defining a css style property that would be sufficient info.

I know how to control the flow of my content in the page source somewhat with float: left; and float: right; which i use sometimes.

However, I am unsure of how to visually cause the page to display a div below another div, although in the page source the bottom div is above the top div.

That may sound weird, but surely someone knows what kind of css styling im looking for and hopefully can help me find the info for it.

Example page that implements what im talking about:

I am mainly a poker affiliate webmaster, so my best example of what im talking about is if you look at this site.


If you look at the page source you will see that their bottom content is actually the first thing that spiders view on the site. The content is visually set below the top in the browser view. In the page source though, the content is crawled first. This styling is obviously purely for onpage search engine optimization.

There are many content topic types on affiliate sites that i run where i would like to implement a css style such as this. Mainly on pages where i want to highlight affiliate calls to action at the top of the page without losing internal link seo for related links on the page.

Thanks For looking.

Please…no one line link troller replies

Firstly, I very much doubt the seo value of what you are trying to do, but anyhow…

What you are asking is easy to do. (It’s not obvious that anything is out of order on that poker site, though.)

One way to do this is to set your main content to position:relative, and then set a top value that pushes the content down by however much you need.

Then you could set the lower content in the html, which you want to appear at the top, to position: absolute and make it display at the top.

Thanks ralph, i was hoping there was another way alternative to absolute and relative positioning as this can be a hassle to do on many pages. I tend to be very anal about spacing and uniformity.

And yes, this is huge seo value particularly for an affiliate site in my niche that often inserts alot of affiliate links and banners at the top visual areas of a page. This links often point to a php redirect which is disallowed in the robots.txt.

Basically It is the trend for poker affiliate sites / hosting review sites etc. to waste alot of in content link juice on pages because they often have 10+ affiliate links appearing before their content links.

for the ub example i posted, you can see that they have to top area thats focused on call to action.

they have a bottom area that is simply a block of content. This is where they are including the big keywords they rank so well for.

The bottom area is what loads first in the page source and after actually looking at the css it is from absolute postioning.

I guess i wish their was a css class that allowed you to float blocks to the top of an area.

the most efficient way i’ve encountered to control content flow thus far is using float right and left for side bars. Whether you put them above or below your main content area, they will visually appear exactly the same.

okay, can you tell me if this is possible?

i want to have a div class thats absolute positioned and starts at a specific region of a page, probably under a top horizontal menu. However, this div will often range in vertical size.

i want my content div, which will show up first in page source, to always start (in browser view) immediately after the absolute positioned div without overlapping.

i know this is possible by defining the absolute positioning of the content div every single time, but am wandering if it can be made easier by defining some specific attributes of the absolute positioned div.

That’s the big problem with this method, and I don’t know a solution to it.

But I’m still not convinced that it makes that much SEO difference to have main content below other stuff. I don’t buy most of this SEO stuff. I suspect Google is a lot smarter than people give it credit for.

As Ralph said you can only move elements of a known height as you have to make room for them somehow. You would need javascript to resize the element or wait for the CSS3 flexible box layout which will do what you want easily.

I happen to agree with Ralph and it seems the benefits of moving stuff around are minimal assuming that the content is well structured from the start. On badly structured pages moving content around can have more impact but if a page is well structured with good headings and content then the benefits will be less. Although Max Cutts does say that the closer the keywords are to the headings the better they will be received. Google will now index long pages and will usually find the content wherever it is.

Others of course argue that moving content does help so you have to test for yourself on the site in question to really know :slight_smile:

wow that css 3 flexible box thing looks interesting. I’m sure it will be a big hit. I guess i’ll have to rough it out for now.

Thanks for the info ralph and paul