CSS3 수평 사업부 정렬

Question

그래서 내가 할 노력하고있어 것은

|-------------------------------------------------------------| 
|-------|leftdiv-250px|centerdiv-1000px|rightdiv-250px|-------| 
|-------------------------------------------------------------| 

그래서 여기에 HTML

<div id="header"> 
    <div id="header-top"> 
     <div id="header-top-main"> 
     </div> 
    </div> 
    <div id="header-main"> 
     <div id="header-main-inner"> 
      <div id="header-main-left"> 
      </div> 
      <div id="header-main-center"> 
      </div> 
      <div id="header-main-right"> 
      </div> 
     </div> 
    </div> 
</div> 

입니다 그리고 여기 아니에요 그래서 CSS

#header { 
    height: 190px; 
    width: 100%; 
    background: #e5e5e5; 
    margin: auto; 
} 

#header-top { 
    height: 50px; 
    width: 100%; 
    background: #e9e9e9; 
    background-image: url(../img/header-top-bg.png); 
    -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75); 
    box-shadow:   0px 0px 10px rgba(50, 50, 50, 0.75); 
    margin: auto; 
    z-index: 999; 
    position: relative; 

} 

#header-top-main { 
    height: 50px; 
    width: 1000px; 
    margin: auto; 
} 

#header-main { 
    margin: auto; 
    width: 100%; 
} 

#header-main-inner { 
    margin: auto; 
    width: auto; 
} 

#header-main-left { 
    width: 250px; 
    height: 140px; 
    background: url(../img/header-main-left-bg.png); 
    float: left; 
} 

#header-main-center { 
    width: 1000px; 
    height: 140px; 
    background: #f7f7f7; 
    display: inline; 

} 

#header-main-right { 
    width: 250px; 
    height: 140px; 
    background: url(../img/header-main-right-bg.png); 
    float: right; 

} 

입니다 문제가 무엇인지, 나는 자동 마진을 가지고 있지만 작동하지 않은 래퍼에 모든 것을 남겨 두려고했습니다. 또 다른 문제는 모든 것이 1 줄로 표시되었지만 페이지 왼쪽에 스택되어 오른쪽으로 계속 이동하여 페이지에 스크롤을 제공합니다.

'header-main'영역이 3 div로 중앙에 위치하기를 원합니다. 그리고 'header-main'영역이 페이지를 벗어나면 스크롤없이 페이지에서 계속 나오기를 원할 것입니다. 내가하려는 일에 대한 스크린 샷이 필요한 경우, 제공 할 수 있습니다. 여기

이 DIV 위치로 문제가 해결됩니다

--------------------|------[  header-top   ]------|------------------- 
space beyond screen |------[leftdiv][centerdiv][rightdiv]------| spce beyond screen 
--------------------|------[  navigation   ]------|------------------- 

Answer 1

요소에 높이, 요소 높이, 부모에 최소 너비를 추가합니다.

#header-main-left, 
#header-main-center, 
#header-main-right { 
    float: left; 
    height: 140px; 
} 
#header-main-inner { 
    min-width: 1500px; 
} 

그리고 스크롤을 중지, 내가 추가 말할 것 인 overflow: hidden; :

#header-main { 
    overflow: hidden; 
} 

Fiddle

Answer 2

또 다른 예를 것, 여기에 내가 잘

"그리고 경우를 이해하지 않는 FIDDLE

#header-main-left, 
#header-main-center, 
#header-main-right { 
    float: left; 
    height: 140px; 
} 

#header-main-left { 
    width: 25%; 
    background: url(../img/header-main-left-bg.png); 
} 

#header-main-center { 
    width: 50%; 
    background: #f7f7f7; 
} 

#header-main-right { 
    width: 25%; 
    background: url(../img/header-main-right-bg.png); 
} 

두 번째 부분 'header-main'영역이 페이지에서 벗어나 스크롤없이 페이지에서 계속 나오길 원합니다. "