I have a webapp which contain 3 textbox side by side ti display important information. However, after reducing my browser size, but my textbox position are fixed into one place. Only my navbar and slideshow header are following my browser size, leaving my textbox behind ( as i fixed my navbar and header as width="100%" ). Therefore, i'm tried to do a wrapper for my navbar, header and body. I'm trying to set a maximum width for the browser and then make the rest as scrollable.

Something very similiar to facebook where i reduce the browser size and it will be scrollable horizontally.

I tried the following CSS which didnt work


#wrapper {
width:80%;
overflow:scroll;
margin: 0 auto;
}

Is there any other way i can do it?

Regards.