Еще вот так работает.

Спасибо :) Но я там в 1 пункте писал про width: 100%.
Разве от display: block; что-то сильно изменится?

Кто-то может покидать статистику. Что вообще в ней происходит после подключения адаптива или мобильной версии?

Сегодня просто увидел красоту:
http://dikij.com/foto/667.jpg

Но вдруг на выборке 10 - 20 сайтов все не так красиво.

Если кто-то еще использует Крутилку в партнерке Озона, могут быть полезны такие вот стили:

Пример.
Подойду к прозрачным Крутилкам и Крутилкам с белым фоном, когда товары идут друг под другом.
Хотя, они немного избыточны, так как у меня внешние ссылки дополнительно помечаются картинкой. И еще подключены стили из этой темы. :) Потому пришлось местами "обнулить".

Покувыркавшись на нескольких сайтах с адаптацией под мобильники и узкие экраны, скажу так:

1. ДА, это ИМЕЕТ смысл! Рост посещаемости ~вдвое, положительная реакция поисковиков да, приносит результат.

2. Я лично при этом соблюдаю вот такие принципы и применяю вот такие решения:

2.1. Если у сайта изначально нет "постоянно висящей менюшки в определённом углу", а навигация вся сверху - вешаем ему стандартную кнопку "Наверх" яваскриптовую, причём достаточно широкую чтобы в неё легко было попадать, и чтобы она закрывала наименее значимую часть контента справа внизу. И чтобы появлялась только тогда, когда актуальна. я брал скрипт отсюда и редактировал под себя

2.2. На экране шириной менее 400 пикселей ВСЕ картинки и ВСЕ ссылки с текстом длиннее 10 символов СЛЕДУЕТ делать width:100% display: block и clearfix! Альтернативное решение - короткие тексты ссылок. См., например, у меня на http://arda.su/ (ссылки на альбомы, годы, синглы) - конструктивная ругань принимается, кстати. :) Ещё там есть изврат - старый вариант сайта с радикальным изменением дизайна страниц на малой ширине экрана

2.3. На малой ширине экрана надо или очень сильно уменьшать, или вообще гасить display: none логотип сайта и большую часть шапки. Иначе оно бессмысленно тратит место на экране.

2.4. на ширинах менее 400 пикселей тизеры новостей и статей сайта проще, лучше и юзабельнее сделать БЕЗ КАРТИНОК и БЕЗ ДАТ вообще, а вот шрифт этих ссылок увеличить до читабельного состояния.

qkowlew, спасибо за статистику! Редко присылают.

Я бы по 2.1 добавил, что можно сделать плавающей кнопку "бутерброда" и уже при клике по ней прокручивать вверх. У меня такая кнопка слева на http://dikij.com/ есть и на остальных сайтах - тоже сделал. Только там стрелка, так как "бутерброда" в шапке нет и впихнуть его некуда.

2.2 на arda.su неплохо бы добавить отступы от края в 1 - 2%. А вот про ссылки display: block - не совсем понял - зачем. Максимум делал ссылки display: inline-block с отступами.

2.3. Можно, но не очень люблю, когда ленятся и уже пикселях на 800 врубают "мобильную" версию без шапки. :)

2.4 Зависит от сайта. Можно убрать обтекание картинок, сделать width: 100% и display: block с margin: 5px auto например.

инлайн блок поверх уже имеющегося непрямого дизайна может давать спецэффекты, с которыми я столкнулся на промежуточном этапе возни с например http://beta-press.ru (там ещё стояла задача сохранить совместимость имеющегося PHP движка с его обновлениями автором, хехе. Что решительно уменьшало пространство для манёвра). Потому я как-то перестал его активно применять. :(

Согласен, тоже не очень люблю. Но при исходной таблице фикс ширины 960px с фиксированными размерами картинок в ячейках и (тадам!) точно подогнанных однопиксельных рамочках это бывает такой адЪ, что проще погасить это всё ( см. тот же бета-пресс ) и (если движок позволяет) нарисовать вместо этого более резиновую шапочку.

Прикол отдельный тут в том, что проверка Яндекс-Вебмастером "сайт оптимизирован для мобильных устройств" подразумевает, в частности, отсутствие горизонтальной прокрутки. И, фактически, для более позитивного отношения яндекса, ЛУЧШЕ погасить ссовсем такую фиксированную-табличную шапку, если с ней не удалось справиться.

Ага. Зависит. И при вертикальной картинке тизерная картинка сжирает весь экран, а квадратная - больше половины, хехе. Так что это только при тизерных картинках исключительно горизонтальной ориентации.

Я бы не выдержал, разнес бы таблицу на блоки с обтеканием, сделал ширину контента 98 с margin 1% по краям.
Ну и логотип поставил бы по центру. Так он почти всегда выглядит лучше. Плюс, инлайн-блоки для верхнего меню с выравниванием по центру.

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

Это уже я "так и не решил, как лучше" и "оставил как клиент сказал ДА!!!" на получившейся картинке. Согласен, дошлифовать было можно. В данном случае логотип квадратненький и задуман изначально как "верхний левый угол страницы". :)

Вот это, пожалуй, верно.

Добавлено через 4 минуты
Надо будет более обстоятельно перепроверить работу процентов в маргинах и паддингах. А то было дело, 98%+1%+1% не во всех браусерах образовывало div без горизонтальной прокрутки, и это бесило.

Дело обычно в рамке в 1px.
Если это не таблица, лучше прописать width: auto и margin-left: 1%; margin-right: 1%;
Тогда ни padding вутри, ни рамка - не повлияют никак.

Там еще есть варианты (с max-width, например) но все перечислять не буду.

Еще гляньте
http://htmlbook.ru/css/box-sizing