floating div to the right

I am trying to adjust my css to float an image to the right, but I can't seem to find the right combination. It is instead pushing the text on the left to the bottom of the page. Is there a better way to accomplish this?

   #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 spa开发者_如何学Pythonn{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

You should make sure that the width of your internal elements isn't greater than the width of the container OR the sum of the width of your text elements plus the image container's width isn't greater than the width of their container:

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

In the code above, I removed all unnecessary padding, gave the container the correct width. Please revise the code above to understand what really happened.

A good example can be found below:

http://jsfiddle.net/N5mxn/