래퍼 테이블 안의 테이블 셀 센터링 - 유체 레이아웃 3 열

Question

세 번째 시도는 Stack Overflow 멤버의 제안에 따라 반응 레이아웃을 내 사이트에 기록하는 것입니다. 이번에는 디스플레이를 사용하고 있습니다 : 테이블/디스플레이 : 내용에 의해 높이가 조절되고 끈적 인 바닥 글이있는 페이지 래퍼를 중앙에 배치하는 표 셀 설정.

멤버가 기본 레이아웃을 제안했습니다. (감사합니다!)하지만 너비가 100 % 미만인 경우 인라인 래퍼를 내 페이지 래퍼의 가운데에 배치 할 수 없습니다. 인라인 랩퍼를 페이지 랩퍼의 오른쪽으로 강제 설정합니다.

여백, 패딩 및 텍스트 정렬을 시도했습니다. 아마 "center"태그로 해킹 할 수는 있지만 코드가 의미 론적 이길 원합니다.

이것은 내 코드의 압축 된 견해입니다. 내가 틀린 일을하고 있는지, 문법을 찾지 못했는지 (이전에 쉼표를 잊어 버렸습니다. 문제는 30 분이 걸렸습니다), ie10 및 Opera 용 해킹이 필요합니다. 도대체 무엇이.

<div id="page-wrapper> 
<div id="logo"><img /></div> 
<div id="inline-wrapper"> 
    <div id="top-content"> 
    <div id="left"><img /></div> 
    <div id="center">content blah blah</div> 
    <div id="right"><img /></div> 
    </div> 
    <div id="nav-menu"><ul><li><img /></li></ul></div> 
    <div id="main-content"> 
    <div id="left"><img /></div> 
    <div id="center">content blah blah</div> 
    <div id="right"><img /></div> 
    </div> 
</div></div> 
<div id="footer"></div> 

html, body, #page-wrapper, #inline-wrapper, #top-content, #main-content { 
     height:100%; 
    width:100%; 
    margin:auto; 
} 

#page-wrapper { 
    height:100%;/* to show footer */ 
    width:70%; 
    position:relative; 
    display:table; 
    table-layout:fixed; 
    border:solid; 
} 
#logo { 
    width:100%; 
    top:.75%; 
    z-index:99; 
    position:absolute; 
} 
#logo > img { 
    width:100%; 
} 
#inline-wrapper { 
    position:relative; 
    display:table-cell; <-- /* I removed this */ 
    width:90%; 
    margin:auto; 
    background-color:#fff; 
    padding-bottom:1%; 
} 

#top-content, #main-content { 
    display:table; 
    width:98%; 
    border-collapse:collapse; 
} 
#top-content { 
    height:60%; 
} 

#right, #left, #center { 
    display:table-cell; 
} 

#left { 
    background-color:#CC0000; 
    width:14%; 
} 

#left img { 
    width:100%; 
    height:100%; 
} 

#right { 
    background:#0600ff; 
    width:14%; 
} 

#center { 
    width:72%; 
    background:#ccc; 
} 

#nav-menu { 
    width:100%; 
    margin:0 auto; 
    text-align:center; 
} 

#nav-menu li { 
    color:#fff; 
    margin:auto; 
    display:inline-block; 
    background-color:#000000; 
    list-style-position:inside; 
    border:1% solid #ffffff; 
    padding:.75%; 
    width:12.5%; 
    height:31%; 
    vertical-align:top; 
} 

#nav-menu li:hover { 
    opacity: .55; 
    filter: alpha(opacity=55); 
} 

#nav-menu li img { 
    height:100%; 
    width:100%; 
} 

#footer { 
    width:100%; 
    height:250px; 
    background-color:#000; 
    border-top:solid; 
} 

Answer 1

. 이것을 다음과 같이 변경하십시오 : < div id="page-wrapper">