Min width in window resizing

Question

I have a webpage with a fluid layout with a 100% width.

When I resize browser window the elements in the page overlap.

I would create an effect similar to this website http://bologna.bakeca.it/ that when window is smaller than a fixed width stop resizing.

Goatee

Answer 1

You can set min-width property of CSS for body tag. Since this property is not supported by IE6, you can write like:

body{
   min-width:1000px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1000px;            /* As IE6 ignores !important it will set width as 1000px; */
}

Or:

body{
   min-width:1000px; // Suppose you want minimum width of 1000px
   _width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}

Hemipterous

Answer 2

Well, you pretty much gave yourself the answer. In your CSS give the containing element a min-width. If you have to support IE6 you can use the min-width-trick:

#container {
    min-width:800px;
    width: auto !important;
    width:800px;
}

That will effectively give you 800px min-width in IE6 and any up-to-date browsers.

Tiny

Answer 3

Use @media in CSS

Take a look at @media CSS at-rule.

You can use @media screen and (max-width: ...px) and @media screen and (max-height: ...px) and set with of your html component to keep you're page always up to the value you choose. After, if you want users can access the masked content of your page set overflow:auto.

You can't prevent user resize his browser under this values but you're web page will never go under the values you select.

For example, for minimum width = 330px and minimum height = 400px, the CSS can look like :

body{
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 330px){
  html{
      width: 330px;
      overflow: auto;
  }
}
@media screen and (max-height: 400px){
  html{
      height: 400px;
      overflow: auto;
  }
}

Anopheles