Вообщем, смотрите на картинку:

Верстаем одну строку, состоящую из двух блоков внутри. Первый блок должен идти перед вторым. Но существуют ситуации, когда второй блок вылазит за края родителя и блоки должны так перестроится, как показана на 3 примере в картинке. То есть второй блок занимают первую строчку, а первый всю вторую строчку.

Как можно реализовать такую верстку?
Как правильно заточить javascript для универсальности этого примера?

Интерисует все.. Если не можете помочь практикой, теория тоже привествуется. Обсуждение верстку этого примера тоже нужны. Заранее всем спасибо.

Присоединённый файл ( Кол-во скачиваний: 24 )
 adaptive.png 6,30 Kb

хотелось бы посмотреть живьём для чего такое требуется, потому что может будет возможно другие варианты придумать - это первое. а второе - хотелось бы узнать относительно блока 1 - он фиксирован по ширине или нет? второй блок, как я понимаю, резинкой должен быть, или он тоже фиксирован, но в различных случаях у него ширина либо одна, либо другая?
 в общем поконкретнее хотелось бы услышать

Можно сделать так:

А дальше на JS либо прилепить его к первому (если хватает строки), либо к левому краю страницы, если второй див "выдавился"

Mavrun, оба блока не фиксированы по ширине. вообще идея проекта такая:
Верстка двух различных по содержанию и виду меню. Причем оба не имеют заданной ширины, то есть зависят от количества содержимого, вставляемого php кодом. Если суммарная ширина достаточна, чтобы не выходить за края, то оба меню идут в строку. Если же суммарная ширина не входит в рамки родительского блока, то второе меню помещается над вторым. И плюс, родительский блок с заданной шириной.

Itsys, спасибо. Я проверю ваш пример чуть позже, сейчас очень не хватает времени..

ммм, суммарная ширина. а в каких случаях она может быть превышена? когда картинки вставляются? потому что если текст, то тогда всё уйдёт в высоту.
если ориентация на размер картинок, то можно при подгрузке страницы проверять это через php, смотрел какая их ширина, и ориентируясь на полученный ответ размещал блоки так или так. 
хотя возможно проще что-то с js придумать. например, можно посмотреть ширины блоков какие получились, там сложить, повычитать, к чему ориентироваться и уже от этого приписывать стили блокам. так пожалуй даже проще

Mavrun, нет, под словом суммарная я имел ввиду ширина первого блока + ширина второго блока. 
Рассмотрим на примере:
Пусть ширина родительского блока 1000px. Ширина первого блкоа не известна (но для нас она 800px). Ширина второго блока тоже не известна (для нас - 190px). 800px + 190px - это и есть суммарная ширина. Когда 1000px - (800px+190px) > 0, тогда у нас получается именно одна строка и второй блок идет после первого. А когда второй блок становится, допустим, 250px (это может произойти в следствии добавления ссылки в меню), получаем 1000px - (800px+250px) < 0. Вот теперь наши оба меню, если стоят в строчку, выходят за рамки родительского блока, и нам нужно скинуть один вниз на новую строчку. Если бы нам нужно было скинуть второй блок вниз, то делалось бы это элементарно. А вот как нам теперь скинуть первый блок?

Может кто-нибудь показать пример, как реализовать это на чистом JavaScript? Потому что я работаю только c jQuery.

Например так:

Или так, если очередность блоков в коде не критична:

Хм.. Все оказалось довольно таки просто =). Идея пришла случайно, от отчаяния.

Вообщем не буду описывать теорию, вот код:





Все банально и просто.

Интересно, что же дал такой способ?
.block1 всегда будет занимать 100% ширины родителя, а .block2 всегда находится под ним.

Черт.. Ступил.. А если мы возьмем что-то вместо блочного элемента?