Keeping y-scroll bar fixed to the right side of a column

I have a row that has a column layout like this: 2 - 8 - 2. Within the first 2 column div( class=side) I have a Ul(class= scroller) with a y-scroll bar. The problem Im having is keeping the scroll bar to the right side of its parent div(.side). If I dont specify a width it doesnt line up, If I set it to pixels then when the column changes in size the bar stays place and is usually found to appear outside the div. Id like to keep it fixed to the right side of its parent div no matter what the current width is.

the 2 column div css is:

.side {
    background-color: #27324d;
    height: 600px;   
}

the UL css

.scroller{
  height: 540px;
  width: 293px;(roughly all the wat too the right on my 23" monitor, goes out of whack on smaller monitors)
  overflow: hidden;
  overflow-y: scroll;

}