Html 向右浮动div

我试图调整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;}

---

您应该确保内部元素的宽度不大于容器的宽度，或者文本元素的宽度加上图像容器的宽度之和不大于其容器的宽度：

i、 e:

在上面的代码中，我删除了所有不必要的填充，为容器提供了正确的宽度。请修改上面的代码以了解真正发生了什么

下面是一个很好的例子：

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