div要素を右側に重ねて配置する

Question

<div style="border: 1px solid">Hello</div> 
<div style="float: right;border: 1px solid;width: 30%">Centre</div> 
<div style="border: 1px solid">World</div> 

2番目のdivを幅の30％しかないため、右側に配置しようとしています。しかし、私がfloatを使うと、3番目のdivは2番目のdivと重なってしまいます。 3番目のdivが1番目のdivの直後ではなく2番目のdivの後に来るようにするにはどうすればよいですか？テキストの整列は役立ちません。なぜなら、divの内容だけではなく、div全体を右側にしたいからです。

お勧めします。

Answer 1

このコードはDreamweaverで動作しますが、何らかの理由でjsfiddleで動作しませんか？理由を知っている場合は、コメントを残してください。

http://jsfiddle.net/WAWN2/

<div style="border: 1px solid; width:100%">Hello</div> 
<div style="float: right;border: 1px solid; width:30%; display:block;">Centre</div> 
<div style="border: 1px solid; width:100%">World</div>​ 

もここで明らか使った例です：あなたが望むようにレイアウトを取得するために、第2のdivのhtmlの最初の上記の両方

http://jsfiddle.net/NyFGB/

Answer 2

移動それ：

<div style="float: right;border: 1px solid;width: 30%">Centre</div> 
 
<div style="border: 1px solid">Hello</div> 
 
<div style="border: 1px solid">World</div>