두 열, 같은 높이 레이아웃 - 열 사이의 공간

Question

머리글과 바닥 글이있는 완벽한 두 열 레이아웃을 만드는 코드를 발견했습니다. 두 열은 콘텐츠에 관계없이 완벽하게 오른쪽 아래로 늘어납니다. 이는 내가 찾고있는 것입니다.

문제 : 두 열 사이에 공백을 만드는 방법을 찾을 수 없습니다. 나는 국경을 사용하고 있기 때문에 공간이 필요하고 그것이 비좁은 것처럼 보입니다. 열은 떠 다니지 않으며 마진은 트릭을하지 않습니다.

아무도 기능을 깨지 않고 두 가지를 분리하는 방법을 생각할 수 있습니까? http://jsfiddle.net/7M9rg/3/

많은 감사 :

다음은 jsfiddle 링크입니다!

<div id="wrapper"> 
<div id="header"> 
</div> 

<div id="main"> 

<div id="side"> 
<div id="side-stuff"> 
<ul> 
<li><a href="../English/index.html">Home</a></li> 
</ul> 
</div> 
</div> 

<div id="content"> 
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has</p> 
</div> 
</div> 

<div id="footer">&copy; 2013 </div> 
</div> 

CSS :

/*css reset*/ 
html,body {position:relative;margin:0;padding:0;min-height:100%;width:100%; 
height:100%;} 
div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input, 
textarea,p,blockquote,th,td, figure {margin:0;padding:0;} 
ol,ul {list-style:none;} 
li {list-style-type: none;} 
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: 
border-box; } 


html, body { 
font-family: Helvetica; 
height: 100%; /*important for equal height columns*/ 
min-width: 650px; 
} 

#wrapper{ 
height: 100%; /*important for equal height columns*/ 
padding-bottom:130px; /*This must equal the height of your header*/} 

#header{ 
height: 130px; /*This must equal padding bottom of wrap*/ 
display:block; 
padding: 5px; 
color: #fff; 
border: thin solid #ebebeb; 
border-radius: 10px; 
margin: 10px; 
background-image: url(Images/gradient.png); 
background-repeat: repeat-x;  
width: 99%;} 

#main { 
position: relative; 
height: 100%; /*important for equal height columns*/ 
width: 99%; 
overflow:auto; 
display: table; /* This is needed fo children elements using display table cell*/ 
table-layout: fixed; 
padding-bottom: 50px; /*This needs to match footer height*/ 
overflow: auto; 
margin-left: 10px;} 

#side{ 
background-color: #fff; 
width: 150px; 
margin: 10px; 
vertical-align: top; 
padding-top: 20px; 
padding-right: 10px; 
display: table-cell; 
border-radius: 10px; 
border: thin solid #CCC;} 

#side-stuff{ 
display: block; 
padding-left: 10px;} 

#content{ 
background-color: #fff; 
padding: 10px; 
display: table-cell; /*To make sibling columns equal in height*/ 
margin-bottom:10px; 
border-radius: 10px; 
border: thin solid #CCC;} 

#content-stuff{ 
width: auto; 
height: auto;} 

#footer{ 
position: relative; 
height: 40px; 
margin-top: -40px; /* margin-top is negative value of height */ 
margin-left: 10px; 
clear: both; /* Use if floating elements */ 
color: #999; 
width: 99%; 
border: thin solid #ebebeb; 
border-radius: 10px; 
background-image: url(Images/footer_gradient.png); 
background-repeat: repeat-x; 
background-position: bottom;} 

Answer 1

당신이 display: table-cell을 사용하고 있기 때문에, 마진이 작동하지 않습니다 여기에

는 코드입니다.

다음은 해결 방법 중 하나입니다. 다음 세퍼레이터를 만들고 #side 사이 #content 삽입 : 적합한 값으로 폭을 설정

hr.spacer { 
    display: table-cell; 
    border: 1px; 
    width: 10px; 
} 

:

<hr class="spacer"> 

스타일 새로운 요소로.

바이올린 : http://jsfiddle.net/audetwebdesign/navc5/

이 추가 요소를 소개하지만 구현하기 쉽고 신뢰할 수 있습니다.

table-cell은 IE7 이하에서는 지원되지 않습니다. 어떤 사람들에게는 이것이 문제입니다.

Answer 2

이제 요소가 실제로 테이블이기 때문에 테이블에 적용되는 모든 속성을 사용할 수 있습니다. border-spacing 속성은 찾고있는 것이며, 테이블 요소에 적용됩니다.

http://jsfiddle.net/7M9rg/6/

#main { 
    border-spacing: 10px; 
} 

당신은 그것이 있어야 위치로 다시 #main 요소를 얻기 위해 요소 주변의 여백에 땜질의 조금을 수행해야합니다

.