Несколько елементов подряд в одном DIV’e без скрола

[peter888]

Помогите, пожалуйста, решить проблему.
Есть DIV:

<div id="t1" style="width: 520px; height: 300px; overflow: hidden; content: '\2026'; position: relative; z-index: 2; white-space: nowrap;">Елементы (несколько дивов подряд)</div>

Мне надо, чтоб не зависимо сколько елементов есть в етом диве все елементы, которые не помещаються были в одной строке ("прятались").
Если в этот див вписать простой длинный текст, то все работает - текст прячется и не идет в новой строке, а если вписываю в этот див несколько дивов или таблиц, то они (если не помещаються по ширине) отображаються в новой строке.
Как их заставить прятатся?

[subzey]

white-space: nowrap работает для текстовой строки. Див - блок, и никоим образом не часть текстовой строки.

Есть одно решение: задайте всем этим элементам display: inline или inline-block.
Но решение это чрезжопное и в ие6 работать не будет.

[peter888]

м-да.. вобше вот для чего мне это было нужно:
я хотел в этом блоке поместить 67 блоков. Ширина главного блока равно ширине этих малениких внутри блоков умножено на два, Т.е я хотел, чтоб отображались только два блока из 67. А также поместить вде кнопки: назад и вперед. Если жму вперед, то

document.getElementById('t1').scrollLeft = document.getElementById('t1').scrollLeft + 150

, т.е . показываеться уже блоки 2 и 3, если еще раз нажать, то 3 и 4. Кнопка назад - наоборот.
Можно ли както сделать другим способом, есть какието варианты?
Вот здесь на главной есть пример http://wwjd.ru, хотя может быть и немношко другой принцып скрипта

[PeaceCoder]

Тот пример который Вы дали сделан так:
Есть главный блок в котором показываются слайды с position: relative;
В нем каждый слайд имеет position: absolute;
и изменяется значение left. Если показывать конкретный блок не нужно - visibility: hidden;

[peter888]

Вроди получилось:

.div_fon {background: url(image/imgg.gif); background-repeat: no-repeat; width: 251px; height: 147px}

<table border="0" cellspacing="10" align="center">
	<tr>
		<td><span id="down" onclick="document.getElementById('t1').scrollLeft = document.getElementById('t1').scrollLeft-251;">Назад</span></td>
		<td> 
<div id="t1" style="width: 520px; height: 300px; overflow: hidden; content: '\2026'; position: relative; z-index: 2; white-space: nowrap;">
<div style="float: left; position: absolute" class="div_fon"> 111 </div>
<div style="float: left; position: absolute; margin-left: 251px" class="div_fon"> 222 </div>
<div style="float: left; position: absolute; margin-left: 502px" class="div_fon"> 333 </div>
<div style="float: left; position: absolute;  margin-left: 753px" class="div_fon"> 444 </div>
</div>	
		</td>
		<td><span id="up" onclick="document.getElementById('t1').scrollLeft = document.getElementById('t1').scrollLeft+251;">Вперед</span></td>
	</tr>
</table>

Спасибо всем