오른쪽으로 부동 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

당신은 당신의 내부 요소의 폭이 컨테이너의 폭 또는 텍스트 요소의 폭의 합을 더한 이미지 컨테이너의 폭 ISN '보다 큰 있지 않은지 확인한다 t는 컨테이너의 폭보다 더 큰 :

즉 : 위의 코드에서

#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/