右に浮動小数点を表示

Question

イメージを右に浮かせるようにCSSを調整しようとしていますが、正しい組み合わせを見つけることができません。代わりに、左のテキストをページの下に押しています。これを達成するより良い方法はありますか？

#experiential_page_container{float:left; width:100%; padding-top:235px;} 
#experiential_page_container .marketing_details{float:left; width:695px; padding-left:12px;} 
#experiential_page_container .marketing_details h1{float:left; width:100%;font:52px/64px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-2px; color:#fff;text-shadow:0 0 25px #000; padding-bottom:16px; padding-left: 70px;} 
#experiential_page_container .marketing_details h1 span{float:left; width:430px; padding-left:80px;font:21px/23px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:none; color:#0bb0d0; text-transform:uppercase;} 
#experiential_page_container .marketing_details .content{float:left; width:285px; padding-left:152px;} 
#experiential_page_container .marketing_details p{float:left; width:100%; font-size:15px; line-height:16px; color:#fff; padding-bottom:15px;} 
#experiential_page_container .marketing_details p a{color:#0bb0d0; text-decoration:none;} 
#experiential_page_container .marketing_details p a:hover{text-decoration:underline;} 
#experiential_page_container .marketing_details .photo img{float: right;} 

experiential page link

Answer 1

あなたはあなたの内部要素の幅はコンテナまたはテキスト要素の幅の合計プラスイメージコンテナの幅ISN」の幅よりも大きくないことを確認する必要があります

すなわち：そのコンテナの幅よりも大きいトン上記のコードで

#experiential_page_container{float:left; width:100%; padding-top:235px;} 
#experiential_page_container .marketing_details{float:left; width:100%; padding-left:12px;} 
#experiential_page_container .marketing_details .photo{float:right; width:45%; height: 100%;} 
#experiential_page_container .marketing_details h1{float:left; width:53%;font:52px/64px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-2px; color:#fff;text-shadow:0 0 25px #000; padding-bottom:16px;} 
#experiential_page_container .marketing_details h1 span{float:left; width:430px; padding-left:80px;font:21px/23px Myriad Pro, Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:none; color:#0bb0d0; text-transform:uppercase;} 
#experiential_page_container .marketing_details .content{float:left; width:285px; } 
#experiential_page_container .marketing_details p{float:left; width:100%; font-size:15px; line-height:16px; color:#fff; padding-bottom:15px;} 
#experiential_page_container .marketing_details p a{color:#0bb0d0; text-decoration:none;} 
#experiential_page_container .marketing_details p a:hover{text-decoration:underline;} 
#experiential_page_container .marketing_details .photo img{float: right;} 

、私は協力を与え、すべての不要なパディングを削除しました正しい幅にします。上記のコードを修正して、実際に何が起こったのかを理解してください。

良い例を以下に見出すことができる：

http://jsfiddle.net/N5mxn/