css - 下部に配置されたボックスの上にテキストを浮かせる

Question

添付の画像に示すように、html+css をコーディングして結果を達成したいと思います。

テキストと矢印ボックスのあるコーディング部分を意味します。絶対位置だけを配置することは答えではありません。矢印ボックスの周りにテキストを浮かせる必要があるからです。それを行う方法はありますか？

ボックスにすべての種類のフロートを配置し、テキスト付きのパラグラフタグを既に試しました。paragraf タグの前、後、および中に矢印ボックスを配置します。また、矢印ボックスの垂直方向の位置合わせと位置を使用してみました。

遊ぶためのフィドル: http://jsfiddle.net/K2S5y/1/

<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>                
</div>

.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}

Answer 1

clear:both ex を使用します。

<div style="float:left; width:300px">
    <img/>
</div>

<div style="float:left; width:300px">
    Text text text
</div>

<div style="clear:both"></div>

ここで実際の例を見ることができます: http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating

Answer 2

#arrow {
  float: right;
}

/* then possibly  */
#arrow:after {
  content: ' ';
  display: block;
  clear: both;
}