오른쪽으로 상대적 위치 : 0 요소의

Question

나는 1000px 고정 너비 페이지의 왼쪽과 오른쪽을 따라 파선 (사용자 정의) 지루한 목표를 달성하려고합니다. 그러나 나는 오른쪽에 걸쳐 수행은 늘 잘 작동

#border-left{ 
position: absolute; 
float:left; 
top: 0px; 
bottom: 0; 
width: 5px; 
background-image: url('../img/border.gif'); 
background-repeat:repeat-y; 
} 

:

왼쪽 사람이 치료를 작동, 괜찮습니다. 창보다는 오히려 1000px의 오른쪽에 상대적으로 위치해야합니다.

#border-right{ 
position: relative; 
right: 0; 
top: 0; 
bottom: 0; 
margin-top: -90px; 
width: 5px; 
background-image: url('../img/border.gif'); 
background-repeat:repeat-y; 
} 

부모 요소 :

#container{ 
width:1000px; 
display: block; 
margin:0px auto; 
text-align:left; 
padding-top:90px; 
} 

작동하지 않습니다. 이걸 얻을 수 있을까요? 나는 그것이 본질적으로 떠오를 필요가있다 : 오른쪽 (그러나 나는 브라우저 창 높이를 100 % 만들 수 없다). 고마워요

Answer 1

데모 : http://jsfiddle.net/iambriansreed/sAhmc/

절대 요소 플로트 제거됨. 부모에게 절대 위치를 추가하고 왼쪽과 여백을 사용하여 중앙에 배치했습니다. 오른쪽 테두리에서 불필요한 margin-top을 제거했습니다. 경계 ID를 클래스로 바꿨습니다.

테두리는 1000px 너비 밖에 있지 않습니다.

#container>.border{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 5px; 
    background-image: url('../img/border.gif'); 
    background-repeat:repeat-y; 
} 
#container>.border.left{ 
    left: -5px; 
    background-color: red; /* demo */ 
} 
#container>.border.right{ 
    right: -5px; 
    background-color: blue; /* demo */ 
} 
#container{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100px; /* demo */ 
    left: 50%; 
    margin-left: -50px; /* half of width */ 
    text-align: left; 
    padding-top: 90px; 
    overflow: visible; 
    background: #eee; /* demo */ 
}​ 

Answer 2

나는 "위치 : 상대;를 추가하는 것"이라고 생각합니다. #container 요소에 대한 규칙이 적용됩니다.