Alright, this one has been bugging me for a while. I've been going around to some other forums to specialize in CSS but they just cant seem to answer my question.

I have a five column design. Here is the design:

4:3 - Regular Monitor

http://files.e-marvels.net/gif/design.gif

16:9 - Widescreen

http://files.e-marvels.net/gif/design.gif

The idea is that the main content area will strech as the screen size changes. Well it will strech but it wont contract correctly. I set the min-width to 10px so there should be no problem with that, but it seems there is. For some reason it gets stuck and wont get any smaller. This makes it mess up on 1024x768 monitors. What happens is it pushes it self down under the RightBox and LeftBox (green) becaus it can fit. If you make it even smaller it will push it self further down under the RightGrade and LeftGrade (yellow).

Does anyone know how to make it so that this div will shrink more?

I don't know if I understood your question correctly, but try padding: #px;