漂浮在右邊的div

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

你應該確保你的內部元素的寬度不大於容器的寬度或文本元素的寬度之和加上圖像容器的寬度」不是個更大噸比它們的容器的寬度大：

即：

#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;} 

在上面的代碼中，我刪除了所有不必要的填充，得到共ntainer正確的寬度。請修改上面的代碼以瞭解真正發生的事情。

一個很好的例子可以在下面找到：

http://jsfiddle.net/N5mxn/