header google

[Daniil Khanin]

Зайдите на главную странницу гугл  в окне поиска введите "пицца" нажмите поиск. На появившейся странице интересует header, он состоит из 3х дивов,  левый див с лого , див по центру и input и правый див котрому задан float:right.  

 

Че мне непонятно???  А именно то что когда окно бразуре уменьшаешь, то правый див когда доходит до дива по цкентру, последний начинает уменьшаться в ширину... КАк это реализовано???  http://jsfiddle.net/Z9nv8/  вот здесь я показал что ожидаемо когда правый блок доходит до центрального, а именно что центральный падает вниз.И это логично, так как ему не хватает ширины,  а как чтобы он оставался на месте и уменьшался в ширину????Помогите понять а лучше пример в jsfiddle

[Sergik+]

У среднего дива ширина задана в процентах.

Кстати сейчас глянул гугл, так там все через id и половина стилей в html, это как ?

[zenw]

Кстати сейчас глянул гугл, так там все через id и половина стилей в html, это как ?

Это следствие минимизации, а не пример для подражания)

[Daniil Khanin]

У среднего дива ширина задана в процентах.

Кстати сейчас глянул гугл, так там все через id и половина стилей в html, это как ?

class="gb_e gb_ob там ширина дива 650 px !!! а то что вложено 100% от ширины 650px.

[logicface]

Странно это как то и не логично. Задано 650px - точный размер, какая разница что там внутри, почему оно уменьшается? 100% от 650 всегда по идее должно быть 650.

[Sergik+]

Какая разница где что вложено ? Я даже в ихнем коде особо не стал сильно лазать, просто сразу прикинул что наверное через проценты сделано.

Ну не таблицами же .

[Zverushka]

А можно скрин что за хедер такой? У меня кажется по-другому выглядит.

[Daniil Khanin]

А можно скрин что за хедер такой? У меня кажется по-другому выглядит.

http://www.dropbox.com/s/mznbuuhdhtxqjdj/google.png

[Switch74]

сильно не вникал в код, но скорее всего flex

[Daniil Khanin]

Да из - за flex; http://jsfiddle.net/Z9nv8/1/

[Sergik+]

Не понятно зачем использовать свойство совсем новое ? Как насчет совместимости со старыми браузерами ?

[alex.kv]

Вот так вот  http://jsfiddle.net/Z9nv8/ все отлично работает. 

width: 35%; 

[Daniil Khanin]

сильно не вникал в код, но скорее всего flex

А есть идеи как он под ie 10 свёрстан, ведь в ie 10  в коде не вижу я display:flex;

[logicface]

Вот так вот  http://jsfiddle.net/Z9nv8/ все отлично работает. 

width: 35%; 

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

[Switch74]

 

Вот так вот  http://jsfiddle.net/Z9nv8/ все отлично работает. 

width: 35%; 

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

 

Вообще-то текстовое поле там даже не сужается, у него строгая ширина

 

сильно не вникал в код, но скорее всего flex

А есть идеи как он под ie 10 свёрстан, ведь в ie 10  в коде не вижу я display:flex;

Если вы присмотритесь в IE верстка в корне разная, там у поискового поля ширина фиксированная