Google 크롬에서 컨테이너 div의 패딩이 작동하지 않습니다.

Question

나는 고정 폭 중심의 템플릿을 가지고 있으며 "main"div의 왼쪽과 오른쪽에 10px 패딩을 적용하고 싶습니다. 그래서 작은 화면에서 사이트는 화면의 왼쪽을 만지지 않습니다. IE, Firefox, Safari, Opera에서는 작동하지만 Chrome에서는 작동하지 않습니다.

<style type="text/css"> 
    #main { 
    padding:0 10px; 
    } 
    #wrap { 
    width:980px; 
    margin:0 auto; 
    } 
</style> 
<div id="main"> 
    <div id="wrap"> 
    </div> 
</div> 

내가 CSS를하지만 성공의 다양한 조합을 시도 :

여기에 관련 코드입니다. 실제 페이지 here을 살펴볼 수 있습니다. (나중에 변경 될 수 있습니다!)

고마워요!

Answer 1

이 경우 페이지가 실제로 10px 갭의 모양에도 불구하고 옆으로 스크롤되기 때문에 어떤 브라우저에서도 작동하지 않습니다. 적어도 이것이 사파리와 크롬에서 얻는 행동입니다.

대신 사용하려는 것은 최대 너비입니다. 이렇게하면 너비가 980px를 초과하는 것을 방지 할 수 있지만 너비가 자동 조정됩니다.

#wrap { 
    max-width: 980px; 
    margin:0 auto; 
} 

최대 폭은 모든 주요 브라우저가 포함와 호환되는 IE7 +

당신이해야 작은 화면 크기 처리 또한 체크 아웃 CSS 미디어 쿼리 : http://css-tricks.com/css-media-queries/

Answer 2

그것은 #main에 min-width을 정의 대신하는 것이 좋습니다를 padding은 다음과 같습니다.

#main { 
    min-width:1000px; 
    }