Forum Moderators: not2easy
I have the following html text. Please copy and view in your browser. What I would like is for the red box to shift down about 100 pixels and then have the other div's content wrap around the top, right and bottom of the red box.
I tried putting a top margin on the red box of 200 pixels but that just shifted the red box down and still had the other text only wrapping around the right and bottom margins of the red box.
Can someone tell me how to get it so that the outer text wraps around the red box?
Thank you very much.
-- Rodney
#article{width:800px;border:1px solid;}
#body_ad{width:300px;border:1px solid red;float:left;}
#body{}
<div id="article">
<div id="body_ad">THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.THIS IS AN AD.</div>
<div id="body">
<p>Paste some long text here...</p>
</div>
</div>
[edited by: DrDoc at 2:59 pm (utc) on Nov. 22, 2004]
[edit reason] Removed specifics and shortened example [/edit]
What I would like is for the red box to shift down about 100 pixels and then have the other div's content wrap around the top, right and bottom of the red box.
You can do this with a little sleight of hand by placing the box at a paragraph break in the text...
html:
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
<div id="floatbox">BLAH BLAH</div>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>css:
#floatbox{
float:left;
width:50px;
}
This results in a paragraph, followed by a 50px wide box on the left, with the second paragraph wrapping around the right side and bottom. Zero out (or reduce) the paragraph margins and you can drop the first paragraph down snuggly against the top of the box and it would appear to as contiguous text wrapping around three sides of the box.
cEM
Once again, thanks. I am just dumbfounded that I nor anyone else has an answer to this question. What I am asking for is so common to desktop layout programs like PageMaker, Quark and InDesign that I can't imagine it can't be done with css.
-- Rodney
I am just dumbfounded that I nor anyone else has an answer to this question. What I am asking for is so common to desktop layout programs like PageMaker, Quark and InDesign that I can't imagine it can't be done with css.
...and they do exactly what createErrorMsg suggests: start the floated element further down the page.
There is no logical way of handling this using relative positioning, margins, or paddings. That would break their normal usage. In fact, if you want your floated element to appear further down the page... then put it further down the page, physically. That's the right solution to your problem, and that's exactly what the layout programs do as well.
I hope that I didn't offend you with my "dumbfounded" statement because that was directed at my own deficiency as well.
I do know how to position the box further down the page. However, that is not the behavior for which I am looking. Rather, I am looking for a way to place the div further down within it's parent div and have any child divs wrap around the exposed edges. This would be similar to the behavior of a clipping path in quark xpress.
Basically, in my enclosed example, I am tryint to get the text to flow around the top, right and bottom margins of the red box no matter where the red box is place relative to both their parent divs.
Thanks you all for your responses.
-- Rodney
P.S. If you are a member of csscreator.com, you can see what I am looking for at [csscreator.com...]
