div element with absolute vertical, floating horizontal - html

Question

What I am trying to do is have a div element at a specific Y location, but floating to the left or the right (so that the other text on the page will flow around it). I can't seem to find the right combination of attributes..
position:relative;float:right works but the div is at the top of the containing element
position:relative;top:1in;float:right moves the div down, but the area that the text flows around is still at the top of the area, not the +1in area
position:absolute disables the float entirely
Here is a simple example:
<div style='position:relative;top:1in;float:right;border:0.1in solid;'>
<p>This is on the right</p>
</div>
<p>This is the text that should flow around the textbox. Make as long as needed...</p>
What I really want is regions but no browsers really support this yet.
Any ideas? Thanks..

Answer 1

If you want to offset a float from the top, with text flowing around it, you have to insert another zero-width float above it to achieve the offset. Like this: http://jsfiddle.net/YKYmj/7/
#floater {
float: right;
clear: right;
border: 1px solid gray;
background-color: #ccc;
margin: 10px;
width: 100px;
height: 100px;
}
.wrapper:before {
content: '';
float:right;
height:1in;
}
<div class="wrapper">
<div id="floater">In offset, floated box</div>
<p>Lorem ipsum dolor sit amet, consectetur ...
</div>