ansaurus

Question

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

Answer 1

+1 A:

I do not think this is possible using CSS alone. Need JavaScript.

babtek 2010-09-18 20:50:17

in my particular case this might really be the way to go beacuse the header increases its height only by content loaded dynamically using xmlhttpget requests... so javascript can be taken for granted. however it would be interesting if theres another solution.. maby tables

Joe Hopfgartner 2010-09-18 21:00:21

Answer 2

+1 A:

As far as I am concerned it can only be achieved using tables.

<table>
    <tr>
        <td><!-- empty table cell --></td>
        <td rowspan="2" valign="top">General Content</td>
    </tr>
    <tr>
        <td valign="top">Navigation</td>
    </tr>
</table>

Nazariy 2010-09-18 20:53:59

i thought about that too but didnt quite figure a way out! can you provide some sample code or tell me how you would do that? thanks.

Joe Hopfgartner 2010-09-18 21:01:10

thanks! but still, cant get it to work.. http://jsfiddle.net/zfhmW/

Joe Hopfgartner 2010-09-18 23:11:59

Answer 3

+1 A:

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.

vassilis 2010-09-18 21:04:10

this looks interesting! might be an good option in combination with a no-javascript fallback!

Joe Hopfgartner 2010-09-19 12:11:00

Answer 4

A:

Since you've tagged the divs with id, it makes more sense to put the styles in css.

In any case, have you tried

height: auto;

If you want to let the height adjust with content but have it at least 200px, then

min-height: 200px;

should do the trick.

Marc Thibault 2010-09-18 21:20:28

thanks for your input but i think you mis understood the question. the problem isnt the dynamic increasing but the source order of the content elements. the current solution to have a contnet-first order seem to only support fixed height headers.

Joe Hopfgartner 2010-09-18 21:40:55

ansaurus

tags:

views:

answers:

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

related questions