div flottant vers la droite

Question

J'essaie d'ajuster mon css pour faire flotter une image vers la droite, mais je n'arrive pas à trouver la bonne combinaison. Il pousse plutôt le texte à gauche en bas de la page. Y a-t-il une meilleure façon d'accomplir cela?

#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

Vous devez vous assurer que la largeur de vos éléments internes ne dépasse pas la largeur du récipient ou la somme de la largeur de vos éléments de texte, plus ISN largeur du conteneur d'image » t supérieure à la largeur de leur contenant:

ie:

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

Dans le code ci-dessus, j'enlevé tout rembourrage inutile, a donné le co Ntainer la largeur correcte. Veuillez réviser le code ci-dessus pour comprendre ce qui s'est réellement passé.

Un bon exemple se trouve ci-dessous:

http://jsfiddle.net/N5mxn/