1

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?

The Surrican
  • 29,118
  • 24
  • 122
  • 168
  • maby something with inherited height from the header container to a new container and then have it in float conjunction with the header? just a thought, dunno if it makes sense. – The Surrican Sep 18 '10 at 21:41
  • You're asking to violate the HTML spec. Basically between a rock and a hard place. Absolute and fixed position blocks are outside the stream and overlay whatever is there. Floats push things aside, but the rule is that a later block's top can't be above an earlier block's top. If you want the "unimportant" stuff at the top of the page, without javascript to set its height, it has to be at the top of the file. – Marc Thibault Sep 19 '10 at 17:28

4 Answers4

1

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

babtek
  • 934
  • 5
  • 6
  • 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 – The Surrican Sep 18 '10 at 21:00
1

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
  • 6,028
  • 5
  • 37
  • 61
  • 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. – The Surrican Sep 18 '10 at 21:01
1

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
  • 1,385
  • 1
  • 10
  • 20
0

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
  • 1,708
  • 1
  • 13
  • 14
  • 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. – The Surrican Sep 18 '10 at 21:40