Позиционирование блоков и обтекание

[boget]

Вот код, который получается на данный момент:
<div style="margin-top:187px; margin-left: 58px; width: 206px; height: 70px; background:#9F6; position:relative;">
<div style="float:left; width: 50px; height:19px;"></div><div style="float:right; width: 50px; height:19px; background:#C06; vertical-align:bottom; bottom:0px;"></div>
текст текст текст текст текст текст текст текст текст текст текст текст
</div>

Отображение на выходе:

Как сделать, чтоб красный квадратик был в правом нижнем углу зеленого квадратика и чтоб его сверху и слева обтекал текст?

[MrJenika]

просто поменяйте местами блоки с текстом и квадратиком

<div style="margin-top:187px; margin-left: 58px;
 width: 206px; height: 70px; background:#9F6; position:relative;">
текст текст текст текст текст текст текст текст
 текст текст текст текст
<div style="float:left; width: 50px; height:19px;"></div><div style="float:right; width: 50px; height:19px; 

background:#C06; vertical-align:bottom; bottom:0px;"></div>
</div>

[boget]

Если поменять местами, то зеленый из левого верхнего угла съезжает в левый нижний угол, а красный так же при появлении новых строк съезжает вниз, а хотелось бы, чтоб его текст обтекал слева при появлении новых строк. Например, если увеличить высоту до 40px, то получится:

[MrJenika]

так вы не задавайте высоту блока и тогда он будет тянуться на всё содержимое. То есть уберите height: 70px;

[boget]

Если не задавать, то все равно текст не обтекает красный блок слева. Для наглядности увеличил высоту красного блока до 40px и левый блок синим сделал:

код:
<div style="margin-top:187px; margin-left: 58px;
width: 206px; background:#9F6; position:relative;">
<div style="float:left; width: 50px; height:40px; background:#06F;"></div>
текст текст текст текст текст текст текст текст
текст текст текст текст

<div style="float:right; width: 50px; height:40px; background:#C06; vertical-align:bottom; bottom:0px;"></div>
</div>