As Ray said you can only have one element that stretches from top to bottom because and that is the element called #container in your page.
It has a min-height: of 100% which it gets from the height:100% set on html and body.
You cannot nest anymore elements inside #container and give them min-height:100% because you can only base min-height on a parent that has a real height set (e.g height:100%). You can't base it on a parent that has only min-height because the child then collapses to height:auto.
You can't set #container as height:100% either because then it will never grow. It's a catch 22 situation.
What you need to do is be creative and try to do everything on that first element with some sort of composite image if you are trying to make equal columns and borders.
At present you have completely wasted the 100% height effect of #container by applying an image to it that could have been placed in a normal nested div such as your header.
Use #container for the full height background that you wanted.
I'd need to see a picture of what you are trying to do to let you know if its possible or not.
If you are creative you can often achieve these things.