CSS로 내 사이트에서 유체 여백을 얻으려면 어떻게해야합니까?

Question

내 사이트에서 크기를 변경하지 않으려는 고정 너비 중앙 래퍼가 있지만 사용자 화면의 크기에 따라 여백을 조정하려고합니다. 래퍼 - 아우터라고하는 한 div의 모든 것을 래핑 한 다음 여백으로 중앙에 배치합니다. 0 자동이지만 작동하지 않습니다.

사이트 : http://antonpug.com/mainepark/

CSS :

body { 
    font-family: "Nobile", sans-serif; 
    font-size:0.75em; 
    text-align:center; 
    min-width:1550px; 
} 

img#bg { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:-1; 
} 

h3 { 
    font-size:1.25em; 
} 

header h1, header h2 { 
    font-family: "Ubuntu", sans-serif; 
} 

header h1 { 
    font-size:3em; 
    margin:25px 0 0 0; 
} 

header h2 { 
    font-size:2em; 
    margin:0 0 25px 0; 
} 

#wrapper-inner { 
    margin:25px 100px 25px 100px; 
    padding:15px 0 15px 0; 
    background-color:rgba(255,255,255,0.75); 
    moz-border-radius: 10px; 
    webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

#wrapper-outer { 
    width:1500px; -- that didn't work either!!! 
    margin: 0px auto; 
} 

#feature { 
    display:inline-block; 
    width:80%; 
    margin:15px; 
} 

.column { 
    display: inline-block; 
    vertical-align:top; 
    width:600px; 
    margin:15px; 
} 

#col-1 { 
    text-align:right; 
} 

#col-2 { 
    text-align:left; 
} 

.section { 
    margin:0 0 25px 0; 
    height:450px; 
} 

footer { 
    color:#909090; 
} 

footer a { 
    margin: 0 0 25px 0; 
    text-decoration:none; 
    color:#909090; 
} 

Answer 1

신체의 최소 너비를 제거하십시오. 본문의 최소 너비가 내용 래퍼보다 큰 경우 유체 여백이 자신의 작업을 수행하기 전에 스크롤 막대가 표시됩니다.

변경 div#wrapper-inner에에 여백 :

margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model 

마지막으로, SLaks 같은 콘텐츠의 폭 div#wrapper-outer을 조정은 제안했다.

Answer 2

당신은 중심 래퍼에 고정 폭을 추가해야합니다.

Answer 3

col-1 div에 백분율 여백을 추가하면 여백이 유동적으로 조정됩니다.

같은 것을 8%과 같이 보입니다. 여백이 비례 적으로 적응할 수 있도록

CSS 또한

#col-1 { 
margin-right: 8%; 
} 

, 당신의 col-2 사업부의 마진 선언을 제거합니다.