Внутренний элемент должен разбить свои поплавки, чтобы сам всплыть

Question

У меня есть несколько div элементов друг под другом в моем HTML-документе:

#quote
#keyword_tree
#sticky_keywords
#stats

У меня есть все float: left на данный момент, и оно работает на большом экране. В пределах #sticky_keywords есть также плавающие элементы, которые корректно ломаются, если страница очень мала. Проблема в том, что они разбиты на несколько строк, только если обертка (#sticky_keywords) уже находится в отдельной строке.

Как я могу заставить его сломаться, чтобы он соответствовал #keyword_tree без указания статической ширины?

большой экран

большой http://wstaw.org/m/2011/12/17/m48.png

маленький экран

маленький экран http://wstaw.org/m/2011/12/17/m49.png.

Answer 1

С этим он работает довольно хорошо:

#keyword_tree {
    float: left;
    width: 200px;
}
#sticky_keywords {
    overflow: hidden;
    margin-left: 240px;
}

Таким образом, дерево ключевых слов исправлено (это компромисс), но другой может использовать все пространство, которое есть.

Это работаетв Firefox, IE9 и Opera:

http://wstaw.org/m/2011/12/17/Auswahl_001_.png

Но не очень хорошо в Chromium и Chrome и Rekonq:

http://wstaw.org/m/2011/12/17/Auswahl_002.png

IЯ не уверен, как это получается с margin-right.

Answer 2

Возможно, добавив max-width для #sticky_keywords, чтобы он всегда находился рядом с #keyword_tree?