Question

My current layout is based on this:

http://www.cssplay.co.uk/layouts/body5.html

It involves three columns which are each independently scrollable and fluid. However my web app can only shrink in width so much, and at a certain point I would like for something like a min-width (where they will have to scroll horizontally to experience the site)

I tried putting a min-width on the body, but that did absolutely nothing. I also tried wrapping the columns in a containing div and giving it a min-width, this also did not work.

Does anyone else have any ideas on how to approach this.

Thanks

Answer 1

I’m basing my answer on the link you provided.

On html and body, remove overflow:hidden.

On body, add position:relative; min-width:960px.

Tested in recent versions of Chrome, Safari, Firefox.

This also works in IE7+ if you remove the comment at the top <!-- IE into quirks mode -->.