swapping text and image order using CSS

Question

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

HTML order:

<div id="text-content">
....
</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...

Answer 1

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.

Answer 2

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