Предотвратить плавали дивы от упаковки до следующей строки

Question

Вот мой сайт, в первую очередь:

www.kaiserroof.com/test/index2.html

Так вот моя проблема. Вы заметите, что под разделительной панелью в середине страницы есть три столбца, одна с формой, одна с текстом, одна со ссылками. Теперь измените размер окна на несколько меньше, а правый div опустится до следующей строки. В любом случае, просто не показывать это? Таким образом, они будут корректировать (у меня есть макет жидкости) до такой степени, что они не подходят, а затем вместо того, чтобы обернуть div до следующей строки, он просто не будет отображаться?

Надеюсь, это имеет смысл. Любая помощь будет принята с благодарностью.

Answer 1

Вы также можете добиться этого только с помощью CSS.

Просто назначить следующие CSS атрибутов # row4:

#row4 { 
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */ 
    overflow:hidden; 
} 

Это немного отличается от вашего предполагаемого решения, так как правая коробка будет оставаться частично видна при определении размера окна и не сразу исчезнет полностью.

Обратите внимание, что минимальная ширина не работает в IE6. Тем не менее, есть несколько способов эмулируют мин-шириной свойства, если вам нужно поддерживать старую ИЭ:

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

Answer 2

Вам нужно будет использовать Javascript, чтобы получить ширину окна просмотра, а затем изменить свойство отображения div, которое является обертыванием для отображения: none, чтобы оно не отображалось, когда ширина браузера слишком мала.

Answer 3

Вы можете предоставить им обертку div с минимальной шириной и заставить ее использовать горизонтальную полосу прокрутки, если она становится слишком маленькой. Приятная вещь об обертке div - вы также можете дать ей максимальную ширину и не позволять вещам становиться неуклюжим на супер огромных мониторах.

Я не поклонник горизонтальных полос прокрутки, но это полностью удаляет контент.

Answer 4

Хорошо здесь то, что вы должны сделать

Оберните все три плавал деление на родительском DIV, что-то вроде этого

<div id="parent"> 
    <div class="form">......</div> 
    <div class="text">......</div> 
    <div class="links">.....</div> 
</div> 

Теперь, чтобы решить вашу проблему дать фиксированную высоту до parent DIV как

#parent { height:400px;clear:both; }