Несколько DIV в ряд

[apollox]

Всем ДД, есть div-контейнер, внутри несколько DIV с float: left;

DIV идут рядом в одну строку, как и нужно, но если ширина экрана становится меньше длины всех DIV, то не помещающиеся по ширине окна DIV перетекают на новую строку, чего я не хотел бы.

Нужно, чтобы DIV не перетекали, а появлялся горизонтальный scroll.

Поигрался разными свойствами, типа overflow, но увы...

Есть ли кроссбраузерный способ?

Заранее спасибо!

[Yazon_Nile]

Есть. Надо код

[apollox]

Тренируюсь на таком примере, для простоты:

.nav_test {
	float: left;
}

<div>
   <div class="nav_test">Текст 1</div>
   <div class="nav_test">Текст 2</div>
   ....
   <div class="nav_test">Текст N</div>
</div>

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

Edited October 3, 2012 by apollox

[DownHouse]

Задайте width или min-width для контейнера

[Whatsup]

только фиксированная ширина поможет

[apollox]

Спасибо, min-width для контейнера то что надо.

[ils]

Попробуй это:

<style>
.main {
    background: lightblue;
    white-space: nowrap;
    overflow-x: auto;
}
.main > div {
    display: inline-block;
}
</style>
<div class="main">
    <div>Текст1</div>
    <div>Текст2</div>
    <div>Текст3</div>
    <div>Текст4</div>
    <div>Текст5</div>
    <div>Текст6</div>
    <div>Текст7</div>
    <div>Текст8</div>
</div>

Результат:

Edited October 4, 2012 by ils

[Whatsup]

В старых браузерах работает эта конструкциЯ ?

[ils]

Для IE7 добавить:

.main > div {
    zoom: 1;
    display: inline;
}

И все будет ОК.

[Yazon_Nile]

zoom: 1;

ЭТо для ие6

[ils]

Может и для IE6. Я вообще не сторонник поддержки слишком старых браузеров.