элемент div с абсолютной вертикалью, плавающий горизонтальный

Question

То, что я пытаюсь сделать, это иметь элемент div в определенном месте Y, но плавать влево или вправо (так, чтобы другой текст на странице обтекал его) , Я не могу найти правильное сочетание атрибутов ..

положения: относительный; поплавок: правильные работы, но DIV находится в верхней части, содержащей элемент

положения: относительные; сверху: 1in; поплавок : право перемещает DIV вниз, но область, что текст обтекает по-прежнему в верхней части области, а не площадь + 1в

позиции: абсолютные отключающий поплавок полностью

Вот простой пример:

<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> 

Что я действительно хочу - это регионы, но браузеры пока не поддерживают это.

Любые идеи? Спасибо ..

Answer 1

Если вы хотите компенсировать поплавок сверху, с текстом, текущим вокруг него, вам нужно вставить еще один плавающий по оси над ним размер, чтобы достичь смещения. Пример: 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>