Fluid page "side borders"

Hello!

Well, I made a layout and, while trying to transform it from PSD to CSS, I came across a difficulty that I cannot solve.

This page has the following structure:

[WRAP = min-width:1022px; max-width:1250px][HEADER]
[LEFT = float: left]
[RIGHT = float: right]
[CENTER = float: left][SIDEBAR = float: left]
[CONTENT = float: left]
[FOOTER]The LEFT and RIGHT div's are the borders of each side (with background images) were supposed to shrink down it's width if the user's screen resolution is small. I tried anything I could but I cannot get this done!

Right now, they're fixed-width, as I cannot find a solution to this problem.

If anyone can help me, I appreciate so much! :D

Thanks in advance!
Alex.

[EDIT] Oh, I forgot the link! http://cisneiros.com/tests

try using 'em' or '%' instead of 'px' if you are concern about screen resolution.

vineet

vineet, that's a good ideia, I'll try it.

But the point here is how to make the page borders (LEFT and RIGHT div's) fluid.
Like: if you have a big screen, the boders show up fully. If you have a smaller screen, the borders shrink, so you won't get scroll-bars. I tried min-width = 0 and max-width = (the correct width) on the borders, but if I do it, they just disappear.

Well, I found no CSS solution, so I'm appealing to JavaScript :/

http://cisneiros.com/tests/test.html
This was the way I found, but there must be a way to do this with CSS!