Плавающие divs с использованием% widths с минимальной/максимальной шириной и высотой 100% (отзывчивый)

Question

У меня есть 2 divs, нужно быть фиксированной шириной, другая - чувствительной к пользовательскому устройству. В настоящее время, когда ниже определенной ширины плавающие divs прыгают на отдельные линии. Есть ли способ ...

1) Сделайте их как 100% высоты тела

2) Оставайтесь в том же направлении, так что правая сторона ДИВ может уменьшаться в ширину, а левая сторона DIV сохраняет это мин/макс. ширина?

Также правый div на 70% никогда не заполняет все 70% доступного пространства.

Я понимаю, что я пытаюсь сделать, это немного оксюморон, но не может думать об этом.

http://jsfiddle.net/establish/fxQfv/

HTML

<article> 
</article> 

<section> 
</section> 

CSS

article { 
background: blue; 
float: left; 
height: 100px; 
width: 30%; 
min-width: 200px; 
max-width: 200px; 
} 

section { 
background: red; 
float: left; 
height: 100px; 
width: 70%; 
} 

Answer 1

http://jsfiddle.net/fxQfv/3/

article { 
    background: blue; 
    height: 100px; 
    width: 30%; 
    float:left; 
    min-width: 200px; 
    max-width: 200px; 
} 

section { 
    background: red; 
    height: 100px; 
    width: auto; 
} 

Для вашей проблемы высоты взглянуть на эту статью: http://www.alistapart.com/articles/fauxcolumns/

Answer 2

Ваша проблема в эти две строки:

min-width: 200px; 
max-width: 200px; 

Они противоречат этой линии:

width: 30%; 

section всегда будет 7 0% от ширины, но article всегда 200px. Если вы удалите эти две строки, это сработает.

Если вам нужна статья, которая должна быть 200px, раздел должен быть width: auto, хотя я не знаю, гарантировано ли это во всех браузерах.

Answer 3

Я не думаю, что ваша идея может быть достигнута с использованием двух элементов отдельно. Вместо этого я бы поставил <article> в <section>, а затем делая раздел

section { 
width: 100%; 
}​ 

Этот путь, тем <section> всегда будет соответствовать строке, а <article> все еще может быть фиксированной ширины. Кроме того, вам не нужно вводить процентную ширину для <article>, так как установка max-width = max-height заменит его.

http://jsfiddle.net/fxQfv/4/