Question

I mean that there are two contents on the body, content left and content right, i would like to do content right as a menu panel and put a separator gif (feathered vertical line) between of them. Please tell me how can i do it ? What is the css code? Thanks.

Answer 1

see you can get your desired result through easy code :-

HTML

<div class="wrapper">
<div class="left">left-panel</div>     
<div class="right">right-panel</div>    
</div>  

CSS

.wrapper {
border:1px solid red;
overflow:hidden;
width:220px
}

.left {
float:left;
width:100px;
height:280px;  
background:grey; 
position:relative;
}

.left:after {
position:absolute;
content:" ";
width:1px; 
height:280px;
background-color: #FAFAFA;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FAFAFA));
background: -moz-linear-gradient(top, #000000 0%, #FAFAFA 100%);  
right:-10px;
top:0;  
}
.right {
float:right;
width:100px;
height:280px;  
background:lightgrey;  
}

DEMO