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

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

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

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

Ответ 1

Вы можете установить свойство min-width CSS для тега body. Поскольку это свойство не поддерживается IE 6, вы можете написать как

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

или

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

Ответ 2

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

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

Это даст вам минимальную ширину 800px в IE6 и любых современных браузерах.