DIV wrapping on browser resize

Question

Итак, в основном на веб-сайте, который я проектирую, есть 3 divs внутри контейнера div. Один плавающий влево. Два справа вверху и один внизу. Они отлично работают, когда браузер максимизируется. Проблема в том, что при изменении размера браузера правые divs обходятся ниже левого div, хотя я установил min-widths. Я хочу, чтобы divs оставались там, где они есть, и вместо этого появляется полоса прокрутки. Я попробовал переполнение, не повезло. Любые решения?

PS- Первоначально я добавил минимальную ширину для внутренних разделов. Они, похоже, не решили проблему, поэтому я удалил их. Решение или подталкивание в правильном направлении было бы действительно оценено.

Вот ссылка на jsFiddle - http://jsfiddle.net/R62w4/3/

Спасибо, Мэтью. Несмотря на то, что исправлена ​​проблема с упаковкой, у моего сайта теперь есть тонкая линия пикселей с правой стороны. Любая идея, как я его удаляю? Он продолжается от заголовка до нижнего колонтитула. На него не влияют какие-либо изменения в элементах CSS, относящихся к заголовку или панели навигации или нижнему колонтитулу.

Хорошо, я нашел причину лишнего места с правой стороны. Если я увеличиваю свои поля для внешнего div, пространство увеличивается. Есть ли способ увеличить рентабельность, не получая пространства?

Answer 1

Вы можете быть в состоянии обернуть их в этом:

<div style="white-space:nowrap;"> 

</div> 

... чтобы не допустить этого.

Трудно точно узнать, где проблема, не могли бы вы разместить какой-либо код или сделать JSFiddle?

Update:

Я считаю, что проблема заключается в том, что вы используете ширину и точки%, основанную на поля - это легко запутаться, сколько свободного места у вас есть, а затем ваш макет развалится. Учтите, что два оставшихся DIV с шириной 50% с 1px маржи каждый раз каждый раз будут разбиваться на две строки, потому что это более 100%.

Я изменил вашу скрипку немного: http://jsfiddle.net/R62w4/5/

... просто перемещая левый край от первого DIV и правого края с других два родительского контейнера, кажется, дают достаточно мест для всего.

P.S. You может использовать проценты на основе процентов и просто убедиться, что все, что вы хотите быть на одной линии, остается < = 100%.

Answer 2

simpl css framework показывает, как делать столбцы, основанные на процентах, с полями на основе пикселей, которые вы хотите.