Line of dots between items

Question

Restaurant web site and menu. I need to get \"line of dots\" between menu item and price. I need to get it without writing dots manually one by one. This feature should work aut

Answer 1

Use a div with absolute positioning? White backgrounds for paragraphs? Valid for any length of menu-item-name. Play around with it, good luck!

    
Marinated olives
    
4,00€
    



.item_wrapper{
    width:100%;
    clear: both;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:relative;
    width:100%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}

http://jsfiddle.net/MrgBM/