Search code examples
htmlcssseosoc

Dynamic height header in SEO optimized SOC (Source Ordered Content) layout using only CSS, no Javascript?

I want do do a layout that is search engine and speed-browser friendly with content first in source code. Usually this looks like this:

    <body>
    <div id="content" style="margin-top: 200px;">
    i am content, i go first
    </div>
    <div id="head" style="height: 200px; position: absolute;">
    i am an header that is depressed because my designer things i am not important
    </div>
    </body>

but I need an dynamic sized header increases the height with its content... this must be a common problem. is it possible to solve somehow? any ideas?

Solution

  • I agree with @babtek though, I'd really like to be wrong, cause this looks interesting.

    Also, this is probably not what you need, but HTML5 has a "reversed" attribute for <ol> that could do the trick.