Layout: Position DivTags relative to one another with wrap

started by Rwoodruf on Nov 11, 2004 — RSS Feed

Rwoodruf Rwoodruf
Posts: 1

Hello all,

I am attempting to create something similar to the following url: http://www.pcmag.com/article2/0,1759,1677192,00.asp

More specifically, I am attempting to create the same layout as the article body.  I basically want to have a flash movie surrounded by text just like this article. However, I want to limit myself to the following:

[list]
[*] Article text must be in its own div
[*] Flash movie must be in its own div
[*] Flash movie div can not reside inside Article div.
[/list]

So far, I have come up with the following html:

<snip>
<div id="article">
   <div id="ad">Ad box here</div>
   <div id="body">some body text here</div>
</div>
</snip>

and the following styles:

<snip>
#article{width:800px;border:1px solid;}
#ad{width:300px;border:1px solid red;float:left;margin-top:200px}
</snip>

However, this creates a margin around the ad div that goes up for 200 pixels.  This results in ad body text being wrapped along the right and bottom margins of the ad div with no text above the ad div because of the 200 pixel margin.

I hope that this makes sense.  Any and all help is appreciated.

You must login to reply