Question

I am looking at a website on the internet with the standard centered box design (the entire site is centered in a box and has a border each side). As you shrink it, the border gets smaller but the content stays the same size. This is fine.

However on their site, once you get smaller still, you simply get scrollbars. The content remains untouched. On my site if you do this, things like text and links start to scroll onto multiple lines and the whole site gets broken. How can I keep it the same even when the viewport is small?

Answer 1

You can try this:

#box
{
   width: 500px;
   /* overflow set to scroll will give you your scroll bars */
   overflow: scroll;
}

If you are looking to handle the minimum width, it is a little trickier as min-width is not supported by IE.

You can try this:

#container
{
/* IE will ignore min-width */
min-width: 400px;
/* IE will process the expression below to give you your minimum width, other browsers
will ignore it */
width:expression(document.body.clientWidth < 400? "400px": "auto" );
}