swapping text and image order using CSS

I need to swap the visual order of 2 elements using CSS

HTML order:

<div id="text-content">
...开发者_JS百科.
</div>
<div id="header-image">
....
</div>

Visual order required:

   ______________________ 
  |   image              |
  |   (fixed height)     |
  |______________________|

   ______________________ 
  |   text               |
  |   (variable height)  |
  |______________________|

I can't seem to get them to display properly. I have full access to XHTML and CSS, just need to swap the visual order for SEO purposes, while keeping the text as far up the code as possible. Cheers...

The best way to go, I think, is

• giving the text div a padding-top: xyz to make space for the logo, where xyz is the height of the logo

• and to position: absolute; top: 0px; left: 0px the logo.

however, I can't really think of any SEO scenario where this would give any noticeable advantage.

try this...

#text-content {float: left; margin: 320px 0 0 0;}
#header-image {float: left; position: absolute;}

<div id="text-content">
    Image description
</div>
<div id="header-image">
    <img src="test.gif" alt="image"/>
</div>

this example assumes you have an image of height 300px and you want a 20px padding between the image and the text below it.

hope this helps