first of all, thanks for the reply, I appreciate you taking the time to write code and helping me out with this!
I opened the html code in a browser and this is what I got:
You can find the code I'm playing around with here
I'm not sure you understood exactly what my original screenshot in the first post was about.. it's basically showing three different scenarios:
1) scenario 1: both side divs are hidden and hence the middle div has a width that fits the page
2) scenario 2: when i toggle/show the side div (that is on the left), the middle div adapts itself and horizontal scrollbar appears inside the middle div
3) scenario 3: when i toggle/show both side divs (the one on the left and the one on the right), again the middle div's adapts and the horizontal scrollbar appears.