Минимальная ширина при изменении размера окна

Question

У меня есть веб-страница с плавным макетом шириной 100%.

Когда я изменяю размер окна браузера, элементы на странице перекрываются.

Я бы создал эффект, подобный этому сайту http://bologna.bakeca.it/, когда размер окна меньше фиксированной ширины, прекратите изменение размера.

Answer 1

Вы можете установить свойство минимальной ширины CSS для тега body. Поскольку это свойство не поддерживается IE6, вы можете написать так:

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

Или:

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

Answer 2

Ну, вы в значительной степени дали себе ответ.В вашем CSS дайте содержащему элементу минимальную ширину.Если вам нужно поддерживать IE6, вы можете использовать трюк min-width:

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

Это эффективно даст вам 800px min-width в IE6 и любых современных браузерах.