How can I float a div at a fixed height from the top of the container?

I think this will require javascript. I figured it wouldn't hurt to ask though.

We all know how to float an image or div right or left and have the text flow around and below that image. I'm trying to float a div at a fixed width from the top of a container and have text flow around above and below it.

It would be eas开发者_JS百科iest if I could place this div above the paragraph text, but I could insert it if I had to.

I made this crude image outlining what I'm trying to do.

Thanks!

a bit of a cheat but possible using a dummy spacer

CSS:

#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}

.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}

.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}

.dummy {float: right; height: 300px; width: 1px; background: #f00;}

HTML:

<div id="wrapper">

<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">   

<p>all your paragraphs follow</p>
</div>

Working Example: HERE

and the spacer does need to be at least 1px wide, but it can be transparent

Have you tried something like this?

http://jsfiddle.net/8DczT/1/

This is exactly what a float does; it puts a box wherever you specify, and content flows around it. See this jsFiddle.

Put a margin-top on your floated div, to push it down from the top, something like this:

<div>  <!-- parent containing div -->
    <div style="float: right; margin-top: 50px">floated div</div>
    <div>paragraph 1</div>
    <div>paragraph 2</div>
</div>

As long as you get the margin right, you can floa it halfway between the center of the two paragraph divs.