여백이있는 요소 : 자동으로 부유 요소가 겹칩니다. 솔루션?

Question

나는 대부분의 페이지에서 내 콘텐츠 영역에 중심을두고 싶은 div가 있는데, 나는 이것을 "margin:5px auto;"을 통해 완성합니다.

특정 페이지에서 오른쪽에 이미지와 캡션을 넣고 (예 : <div><img /><cite></cite></div>) 원본 영역을 나머지 공간의 가운데에 배치하고 싶습니다. 내 div를 float:right;으로 설정하면 원래 div가 겹칩니다.

원래 div를 대부분의 페이지의 가운데에 배치 할 수있는 가장 좋은 방법은 무엇이겠습니까? 그 옆에 요소를 배치하면 옆으로 조정할 수 있습니까? (또는 나는 테이블, 또는 인라인 스타일 :(

를 사용할 수 있습니다 나는 #right을 할 수있는 뭔가를 원하는 명확히하기 위해 여기에 jsfiddle http://jsfiddle.net/nhaskins/zjZth/

감사합니다.

편집

이 임의 너비이면 #left은 나머지 너비를 중심으로하고 텍스트는 #left 이하로 흐르고 #right 주위로 흐릅니다. 해결책을 찾지 못하면 폴백이 표시됩니다. 지정된 페이지에 대해 올바르게 배치하려면 인라인 스타일로 #left의 여백을 무시하십시오.

Answer 1

사용하여 업데이트 대답 jQuery를 :

http://jsfiddle.net/zjZth/8/

$(document).ready(function(){ 
    var margin = (($('#content').width() - $('#right').width()) - $('#left').width())/2; 
    $('#left').css('margin-left', margin + 'px'); 
}); 

---

원래 답변 :이

가장 쉬운 솔루션 내가 당신의 부동 권리 사업부 외부를 가하고 가지고 올 수 귀하의 콘텐츠, 귀하의 콘텐츠를 제공하는 너의 떠 다니는 div의 너비와 같은 여백.

업데이트 바이올린 : http://jsfiddle.net/zjZth/6/

HTML :

#content { 
    padding: 5px; 
    margin-right:200px; 
} 

#right { 
    background: rgba(0,0,255,0.8); 
    float: right; 
    width: 200px; 
    height: 200px; 
    margin: 5px; 
} 

#left { 
    background: red; 
    margin: 5px auto; 
    width: 200px; 
    height: 120px; 
} 

Answer 2

수레 문제는 일반적인 콘텐츠 흐름에서 그 요소를 가져오고 거기에 떠 다니는 것이고 다른 요소와 잘 어울리지 않는다는 것입니다. 인라인 요소로 사용하거나 clear:both을 사용해야 할 수도 있습니다.