CSS 슬라이딩 도어 효과와 함께 전체 내용 영역을 사용하려면 어떻게해야합니까?

Question

가변 폭 콘텐츠 상자를 표시하기 위해 슬라이딩 도어 효과를 사용하고 있습니다. 효과는 잘 작동하지만 문제는 효과를 만들기 위해 필요한 패딩 오른쪽이 컨텐츠 영역의 일부 먹는다이다 :

http://screencast.com/t/s9dTT1wU

내가 모든 길의 왼쪽 가장자리에서 이동 내 콘텐츠를 필요 오른쪽 가장자리에 그래픽. 나는 네거티브 마진을 사용할 수 없도록 이전 IE를 지원해야하며 텍스트 만 들여 쓰기가 불가능합니다. 왜냐하면 텍스트뿐만 아니라 전체 HTML 컨텐트가 내부에 필요하기 때문입니다. CSS의는 다음과 같습니다

.Quote.Outer 
{ 
    float: left; 
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutRight.png); 
    background-position: right center; 
    background-repeat: no-repeat; 
    padding-right: 50px; 
    height: 81px; 
} 

.Quote.Inner 
{ 
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutLeft.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    height: 81px; 
    outline: solid 1px hotpink; 
} 

및 마크 업입니다

<div class="Quote Outer"> 

    <div class="Quote Inner">html content here</div> 

</div>  

내가 문을 슬라이딩의 이러한 단점을 논의하고 다른 사람을 찾을 놀랐습니다. 거기에 합리적인 크로스 브라우저 솔루션이 있나요?

Answer 1

왼쪽 패딩을 허용하려면 다른 레이어가 필요합니다.

DEMO HERE

또는 내부 사업부에 패딩을 추가

DEMO HERE

또 다른 옵션은 단순히 패딩 모양을 줄이기 위해 오른쪽으로 조금 내부의 콘텐츠를 이동하는 위치를 사용하는 것입니다. 하지만 실제로 컨텐트 컨테이너가 전체 이미지 기반을 채우도록 시도하고 싶지는 않습니다. 이로 인해 슬라이딩 도어의 포인트 인 크기 조정 문제가 발생합니다.

DEMO HERE

당신은 항상 패딩의 50 개 픽셀이 감소되도록 이미지를 편집 할 수 있습니다.