Search code examples
htmlcsswindow-resize

Min width in window resizing


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.


Solution

  • 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 */
    }