CSS Please help with template [Web Design [21]]

Hi, I have been knocking my head trying to figure out how to do this one. I remember figuring out how to make it work before with another different layout. I'm not sure if the stylesheet for this textbox area was different or similar to Web Design template or not.

Anyways, I was wondering how can I go about adding an overflow property with defined height so that I can have a scrolling div area for the Latest News box in the template. As for the gif borders, I can edit it. I basically will also be editing the footerie area too with my own art. Oh and this is going to be my art portfolio site.

Code:

#news {
    float: left;
    width: 129px;
    margin: 10px 0 0px 6px;
    background: url(images/box_bg.gif) repeat-y;
}

#news div {
    background: url(images/box_t.gif) no-repeat;
}

#news div div {
    padding: 12px 12px 7px 12px;
    background: url(images/box_b.gif) bottom left no-repeat;
}

So this is the code area for the Latest News box. Since I'm planning not to use the default scroller but to use Flexcroll instead (webpage) and have an invisible scroller bar. So using this code (from one of the example downloaded in the package)

Code:

#mycustomscroll {
/* Typical fixed height and fixed width example */
    width: 300px;
    height: 250px;
    overflow: auto;
    /* IE overflow fix, position must be relative or absolute*/
    position: relative;
    /*background-color: #E7EADE;*/
    margin: 0.3em auto;
    padding: 15px;
}

This code is basically the one that goes into the style.css one and the flexcrollstyles.css (in the package) defines the custom shape of the scroller bar as well as it's bg. Moreover, there's also the flexcroll.js (which also included in the package) that enables the custom scrollbar to work.

Anyway, as the code shown above for putting in the scrollbar, I'm not sure where I should be putting that code into which of the #news code sections. Tried #news {}, #news div {}, #news div div{}, and even created another one #news div div div {} to have it serve as the box_b.gif whereas the #news div div {} will be the text area.

Well taht didn't work... so I tried putting it directly into #news {} and it looks like it works, but div box is overlaying the gif texture.

I really hope that you or anyone is understanding what I am saying here, but I really want to get this to work asap and have my site up... sorry I'm a noob coder... or just know nothing about css . And tbh, I was planning to purchase a template... but I found that this template just beats any other template and it really suits my liking... so I really am desperate .

I've attached a ss of what I plan to have it look like for the box area. Sorry would've done it with PSD, but came home late and didn't want to turn on my laptop so I use window paints instead.

Again, thank you for any help at all and I hope that the information I've put down here is adequate enough . I really am appreciated.

 

Nevermind, I coudln't figure out no matter what I do. So I had to sacrifice the border textures and make a new div without any border. And now things seem to be working the way it should.