Show Divs out of sequence?

I need to show divs out of sequence (but NOT in columns), can you show me how to do it?

I'm running a test various headings for an ad. The ad has three parts, a heading, body and links at the bottom. I need to keep the heading (top) and links (bottom) together in the xhtml code but cant' figure out how to do it. Here's what it looks like:

<!-- These two need to be kept together in the html code -->
<div name="heading"><h2>Ad Heading</h2></div>
<div name="links"><p><a>Links to product page</a></p></div>

<!-- This div needs to appear between "heading" and "links" -->
<div name="body"><p>This is a description of the product, and needs to be displayed below the "heading" div, and above the "links" div.</p></div>

HTML:

This is how I need it displayed:

Ad Heading
This is a description of the product....
Links

Is there a way to do this with css? A code sample would be very helpful.

Thanks!

 

vertical-align:bottom;

Code (markup):

That may work. However, I am still trying to understand why you need them together.

 

Hi,

You can do this using a negative margin for example if your code was:

<div id="ad-title">Ad Title<div>
<div id="ad-links">Ad Links</div>
<div id="ad-desc">Ad Desc</div>

Code (markup):

Then you could push the ad links down and add a negative margin on the description to push it up, something like:

#ad-links { margin-top: 50px; /*Push the Links down by 50px; }
#ad-desc { margin-top: -100px; /*Push the description above by 100px, making it appear above the links*/

Code (markup):

You'd have to play around with the values a bit, and this is assuming nothing is coming between the links and description in the HTML.
Otherwise we can play around with a bit of positioning.

 

Thanks for the css idea. I'll give that a shot and see how it works. Are there any browser limitations I should be aware of with that?

I'm using Google's Website Optimizer to test various headings and see how they affect click through. Unfortunately, the actual conversion takes place on a site I have no control over. So I'm using a parameter in the URL to see which converts best. So I need to keep the URLs in sync with the headings. Something like this:

<!-- Google Website Optimizer Page Section Start code goes here-->

<!-- These two need to be kept together in the html code -->
<div name="heading"><h2>Original Heading</h2></div>
<div name="links"><p><a href=http://www.AnotherSite.com?heading=original>Links to product page</a></p></div>

<!-- Google Website Optimizer Page Section End code goes here-->

<!-- This div needs to appear between "heading" and "links" -->
<div name="body"><p>This is a description of the product, and needs to be displayed below the "heading" div, and above the "links" div.</p></div>

HTML:

 

Any luck with getting it to work? It's cross-browser compatabile, although depends what CSS you use because anything could knock some older IE versions (5/6/7) out of place.

You'll need to be able to give the links DIV an ID or class or something so you can distinguish it inside your CSS. DIV's don't even have a name attribute from what I remember anyway but i've seen some people use it wrongly for JS.