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.

Answer 1

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.

Answer 2

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;
  }
}