Divs가 서로 옆에 스택되지 않음 : 비정상적인 동작?

그래서이 divs는 블록처럼 행동하고 좋은 작은 요소처럼 서로의 위에 쌓아두기를 기대합니다 ... 아아, 그렇지 않습니다. 나는이 문제를 이전에 가지고 있었고 그것을 해결할 수 있었다. 그러나 나는 그것이 다시 일어나고있는 이래로 어떻게인지 모른다. 내가 크롬이나 파이어 폭스에서 HTML 파일을 열 때Divs가 서로 옆에 스택되지 않음 : 비정상적인 동작?

는 (그 자체 사업부에서) 표는 좋은 플레이 (또한 자신의 사업부 단위) H1 아래에 앉아 거부합니다. div의 중심뿐만 아니라하여야하며, 그 목적으로 용기 내에 존재

참고. 또한이 사이트를 HTML5와 호환되도록 만들려고 노력 중입니다. 유용한 많은 것들을 지원하지 않는 것 같습니다 :/

너희 HTML :

<body> 

<div id="container"> 
    <div id="content" class="centered shadow"> 
    <div> 
    <h1 class="reddy centered">Welcome to Riverbank Removals</h1> 
    </div> 
    <br> 
    <div> 
    <table class="centered"> 
     <tr> 
     <td class="items centered">&nbsp;</td> 
     <td class="table_head centered">Mon-Wed</td> 
     <td class="table_head centered">Thurs-Fri</td> 
     </tr> 
     <tr> 
     <td class="items centered">2 Men &amp; a Truck</td> 
     <td class="price centered">Mon-Wed</td> 
     <td class="price centered">Thurs-Fri</td> 
     </tr> 
    </table> 
    </div>  
    </div> 
</div> 
</body>

너희의 CSS :

body 
    { 
    background-image:url('bgd.gif'); 
    background-repeat:repeat; 
    background-color:#bb0000; 
    width:100%; 
    height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    } 

#container 
    { 
    position:relative; 
    width:700px; 
    height:100%; 
    margin-left:auto; 
    margin-right:auto; 
    } 


#content 
    { 
    position:relative; 
    width:700px; 
    height:500px; 
    background-color:#ffffff;  
    } 

.reddy 
{ 
    color:#bb0000; 
} 

.price 
{ 
    position: relative; 
    width:100px; 
    font-size:16px; 
    color:#bb0000; 
} 
.items 
{ 
    position: relative; 
    width:100px; 
    font-size:14px; 
} 
.table_head 
    { 
    position: relative; 
    width:50px; 
    color:#bb0000; 
    font-size:3; 
    } 
.menu 
    { 
    position:relative; 
    width:280px; 
    height:120px; 
    background-color:#ffffff; 
    } 

.centered 
    { 
    /* Internet Explorer 10 */ 
    display:-ms-flexbox; 
    -ms-flex-pack:center; 
    -ms-flex-align:center; 

    /* Firefox */ 
    display:-moz-box; 
    -moz-box-pack:center; 
    -moz-box-align:center; 

    /* Safari, Opera, and Chrome */ 
    display:-webkit-box; 
    -webkit-box-pack:center; 
    -webkit-box-align:center; 

    /* W3C */ 
    display:box; 
    box-pack:center; 
    box-align:center; 

    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 

    margin-left:auto; 
    margin-right:auto;  


    } 
.shadow 
    { 
    box-shadow: 10px 10px 5px #000000; 
    }

출처

2013-09-08 Lex Woodfinger

전체 CSS입니까? – Itay

예 - 완전히. 페이지의 나머지 부분은 CSS 센터 물건을 만들기위한 몇 가지 cut'n'paste 일의 일부 헤드 태그의 CSS 그냥 링크, 등 ... –