Запрет переноса блоков.

[goodwin74]

Здравствуйте! Без лишних слов опишу проблему.

Есть три DIV элемента на одном уровне по float:left.

1 блок - ширина фиксированная(53px)

2 блок - резина(max-width:1400px

3 блок - ширина фиксированная(53px).

Суть в том что не могу сделать следующее:

При уменьшении размера окна браузера все блоки остаются на одной линии, а 2 блок уменьшается в размере.

Сейчас происходит так что все 3 блока съезжают на следующую строку и только потом 2 блок начинает уменьшаться.

Буду благодарен за любую помощь, которая поможет приблизиться к данному результату!!!

Чтоб наглядно было прикрепляю анимацию того что нужно и того что происходит сейчас. Заранее спасибо!

[ShumNo]

не поленились сделать картинку

Хорошо бы пример с кодом

Edited June 2, 2013 by ShumNo

[goodwin74]

<div style="width:53px;height:50px;float:left;border:1px solid;"></div>
<div style="max-width:1400px;height:50px;float:left;border:1px solid;overflow:hidden">
<img style="margin: 5px;" src="http://www.porjati.ru/uploads/posts/2012-07/thumbs/1343078613_19.jpg" height="40px" width="200px"/>
<img style="margin: 5px;" src="http://www.porjati.ru/uploads/posts/2012-07/thumbs/1343078613_19.jpg" height="40px" width="200px"/>
<img style="margin: 5px;" src="http://www.porjati.ru/uploads/posts/2012-07/thumbs/1343078613_19.jpg" height="40px" width="200px"/>
<img style="margin: 5px;" src="http://www.porjati.ru/uploads/posts/2012-07/thumbs/1343078613_19.jpg" height="40px" width="200px"/>
<img style="margin: 5px;" src="http://www.porjati.ru/uploads/posts/2012-07/thumbs/1343078613_19.jpg" height="40px" width="200px"/>
</div>
<div style="width:53px;height:50px;float:left;border:1px solid;"></div>

вот пример. Когда уменьшаешь окно они все съезжают а хотелось бы чтоб были на одной линии и средний блок уменьшался.

[klierik]

http://jsfiddle.net/klierik/bT2Nk/

[mrnobody]

http://jsfiddle.net/klierik/bT2Nk/

Наверное еще нужно добавить к блоку .main overflow: hidden; а то левый и правый блоки перекрывают этот блок. Но тогда будут обрезаться элементы выходящие за этот блок (

[klierik]

так это для нагладности на коленке написанно жж...

ну коль уж понеслась, то вот: http://jsfiddle.net/klierik/bT2Nk/1/

[mrnobody]

http://jsfiddle.net/klierik/bT2Nk/

Я тоже подумал о боковых маржинах в ширину боковых блоков.

Теперь он не центрируется, если его ширина больше 1400px.

Edited June 3, 2013 by mrnobody

[klierik]

ну это я так просто добавил, в задаче этого не было

тогда сделаем так: http://jsfiddle.net/klierik/bT2Nk/2/

[goodwin74]

klierik, mrnobody Спасибо Вам огромное!!! Дай бог Вам здоровья

[goodwin74]

Подскажите пожалуйста метод к другому случаю,

<div style="display: inline-block;">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
</div>

Есть блок и 5 картинок. Блок резиновый. Как сделать чтобы при уменьшении размера окна браузера, изображения стали уменьшаться в размере, оставаясь на одной линии. Буду очень благодарен!

[Vulner]

Может быть стоит указывать один из размеров изображения, ширину к примеру, в %? Тогда второй размер браузер будет высчитывать пропорционально.

[klierik]

например так: http://jsfiddle.net/klierik/urV9r/