ブロック要素の境界ボックスを浮動要素の隣に収まるように調整するにはどうすればよいですか？

Question

たとえば、浮動小数点型のdivの横に収まるようにh1要素のサイズを調整します。テキストはすでに浮動小数点数に調整されていますが、背景は浮動小数点数の後ろにあります。

私はh1に右余白を追加することができますが、赤いブロックは可変幅にすることができ、可変マージンを持つことはできません。

CSS：

#redblock {    
    background: red; 
    float: right; 
    margin: 10px; 
    width: 100px; 
    height:100px; 
} 
#wrapper { 
    border: 1px solid black; 
    margin: 10px; 
    padding: 10px; 
    width: 300px; 
} 
p { 
    background-color: #ffd; 
} 
h1 { 
    background-color: #667788; 
    font-size: 1.1em; 
    margin: 10px 0; 
} 

HTML：

<div id="wrapper"> 
    <div id="redblock"></div> 

    <h1>Test tEst teSt tesT</h1> 

    <p>Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt tesT Test tEst teSt 
    tesT Test tEst teSt tesT Test tEst teSt tesT</p> 
</div> 

あなたはh1ためwidth:80%を追加する場合http://jsbin.com/ucili4

Answer 1

を参照してくださいには、現在の赤いボックスの真ん中を見つける幅を行います。だから、あなたがもっと大きいか小さい赤い箱を持っていれば、それはうまくいくと思います。 （おそらく灰色の背景には、右、テスト目的のためにある？）

例：http://jsbin.com/okive4