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.