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 si开发者_运维技巧zed header increases the height with its content... this must be a common problem. is it possible to solve somehow? any ideas?
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.
I do not think this is possible using CSS alone. Need JavaScript.
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>
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.
加载中,请稍侯......
精彩评论