But middle should resize due to window/page size!
Unfortunately, there is no way to express the calculation you want (width: 100%-614px) in CSS. So you have to let the width default to ‘auto’, which means ‘100% minus any margins, paddings and border’, and then use margins or padding on the middle element of the same size as the left and right elements.
Mark B suggests one approach to this using floats; you can also do it by relative-positioning the parent and absolutely positioning the left and right child elements, which has the advantage of not requiring a re-ordering of the elements.
You should be further able to absolute-position the middle element by its left and right properties as suggested by John, but this ‘edge-positioning’ technique doesn't work in IE6, so instead the middle element has to have margins in the same was as the float example.
If you are just trying to put a border image on the left and right of your element you can do that more easily using nested background images:
content...
#header { background: url(/img/header-background.gif); }
#header .left { background: url(/img/header-left.gif) top left repeat-y; }
#header .right { background: url(/img/header-right.gif) top right repeat-y; }
#header .right { padding: 0 280px 0 334px; }