Doc type打破我的CSS，为什么？

为什么添加文档类型会打破此布局？我怎样才能让这个更好？Doc type打破我的CSS，为什么？

的jsfiddle LINK：http://jsfiddle.net/3gA7u/1/

HTML

<body> 
    <div id="maincontainer"> 
     <div id="leftcolumn">left</div> 

     <div id="contentwrapper">right</div> 
    </div> 
</body>

CSS

body { 
margin: 0 auto; 
height: 100%; 
} 

#maincontainer { 
width:100%; 
height: 100%; 
} 

#leftcolumn { 
float:left; 
display:inline-block; 
width: 510px; 
height: 100%; 
background: orange; 
} 

#contentwrapper { 
position: fixed; 
float:left; 
display:inline-block; 
width: -moz-calc(100% - 510px); 
width: -webkit-calc(100% - 510px); 
width: calc(100% - 510px); 
height: 100%; 
background-color: red; 
}

的jsfiddle LINK：http://jsfiddle.net/3gA7u/1/

来源

2014-01-10 user2133606

添加一个'DOCTYPE'可能会*修正你的布局（因为它与你当前的CSS一样），并且你认为它的状态没有一个是“工作”的，实际上它可能被认为是坏的。 – ajp15243