Уменьшать div'ы

[Kerny]

Такая задача, есть горизонтальная строка с div'ами, они создаются автоматически, когда их становится слишком много, нужно их уменьшать по ширине, как, например, в браузере гугле хроме.

<div id="onchantopswitch" class="onchantopswitch globbutton">
	<div class="room_s" tab="chlist">
	<div class="room_s" tabg="f2jb1y3v5bb95mltctaxwdrgxlqlh5" tabf="" tabd="канал1" tabs="kn77a4ko1yxlxs28asub2g9tnvlw85s" tabz="1" taby="terminal" tabx="1"></div>
	<div class="room_s" tabg="f2jb1y3v5bb95mltctaxwdrgxlqlh5" tabf="" tabd="*канал2" tabs="euqab84pmzoa6o4w2y812lkqhktek" tabz="1" taby="terminal" tabx="11"></div>
	<div class="room_s" tabg="f2jb1y3v5bb95mltctaxwdrgxlqlh5" tabf="" tabd="канал3" tabs="eyf3jeugymkqp93iqxtvre24n94tth37" tabz="1" taby="terminal" tabx="14"></div>
	<div class="room_s selected_room" tabg="f2jb1y3v5bb95mltctaxwdrgxlqlh5" tabf="" tabd="канал4" tabs="cziyhh1tzlwssctc6bvkroj947x7dx" tabz="1" taby="terminal" tabx="54" selected=""></div>
</div>

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

Edited August 3, 2011 by Kerny

[Softlink]

Родителю display:table, самим дивам display:table-cell.

Для ИЕ 6-7 надо придумывать чего-то экзотическое.

[ruslan.savenok]

Родителю display:table, самим дивам display:table-cell.

Для ИЕ 6-7 надо придумывать чего-то экзотическое.

http://forum.htmlbook.ru/index.php?showtopic=28456&pid=214590&st=0entry214590

Достаточно экзотики?)

[Softlink]

Родителю display:table, самим дивам display:table-cell.

Для ИЕ 6-7 надо придумывать чего-то экзотическое.

http://forum.htmlbook.ru/index.php?showtopic=28456&pid=214590&st=0entry214590

Достаточно экзотики?)

Ну вот, вопрос ТС решен

[Kerny]

спасибо огромное за помощь, очень выручили, даже не представляете как.)))))

[Kerny]

Возникла еще одна проблема.

<div class="room_s selected_room" tabg="bzfy45dqoi9f58282p8djmrigz3efd" tabf="" tabd="Кому за 40" tabs="i51tc9c7eb8e4nwvnitznme4mlrm3q4" tabz="1" taby="terminal" tabx="26" selected="">
  <div class="text_name">
      <div class="text_m">Кому за 40</div>
      <div id="close_tab_hover1" class="close_tab"></div>
</div>

В выше приведенном коде, каждый тот див, состоит из этих. Т.е в каждый тот див включен див "text_name", он является родителем для "text_m" (там текст, название ссылки вкладки) и для "close_tab" (тут содержится картинка, крестик на него жмешь и вкладка закрывается). Так вот когда создаю много вкладок, картинка начинает, уезжать.

.close_tab{
    background: url("img/close_tab.png") no-repeat scroll center center transparent;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-top: -10px;
    float:right;
}

Чтобы зафиксировать картинку пробую так:

.text_m {
width: inherit;
overflow: hidden;
white-space: nowrap;
}

И вроде норм, но опять же при создании вкладок, уже не картинка уезжает, а вкладка создается за областью, вместо того чтобы уменьшаться. Ключевое, тут white-space: nowrap; если я его уберу, то уедут картинки а вкладка вернется.

Вот стиль

.text_name{
    width: inherit;
}

А вот главного дива room_s

.room_s{
    padding-top: 10px;
	padding-left: 5px;
    background:#999;
	border-left: 1px solid;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
	display: table-cell;
	font-size:14px;
	height:100px;
	margin:-3px 0 0 0;
    word-wrap: break-word;
}

[Softlink]

Позиционируйте эту картинку с крестиком absolut'ом например.

Родителю при этом задайте position:relative.

[Kerny]

не выходит, все равно картинка уезжает, кстати картинка установлена как фон для дива, может из-за этого?

[Softlink]

не выходит, все равно картинка уезжает, кстати картинка установлена как фон для дива, может из-за этого?

Наверное вы что-то не так делаете.

Скоренько накидал два варианта http://jsfiddle.net/tkzQX/ Ничего никуда не съезжает.

[psywalker]

Родителю display:table, самим дивам display:table-cell.

Для ИЕ 6-7 надо придумывать чего-то экзотическое.

http://forum.htmlbook.ru/index.php?showtopic=28456&pid=214590&st=0entry214590

Достаточно экзотики?)

Ну вот, вопрос ТС решен

А вот и не факт! Экспрешаны хреново дружат с JS, т.е. они могут сломать его работу, так что всё это очень хлюпко.

[Softlink]

Родителю display:table, самим дивам display:table-cell.

Для ИЕ 6-7 надо придумывать чего-то экзотическое.

http://forum.htmlbook.ru/index.php?showtopic=28456&pid=214590&st=0entry214590

Достаточно экзотики?)

Ну вот, вопрос ТС решен

А вот и не факт! Экспрешаны хреново дружат с JS, т.е. они могут сломать его работу, так что всё это очень хлюпко.

ну судя по всему, здесь случилось все хорошо

[psywalker]

Родителю display:table, самим дивам display:table-cell.

Для ИЕ 6-7 надо придумывать чего-то экзотическое.

http://forum.htmlbook.ru/index.php?showtopic=28456&pid=214590&st=0entry214590

Достаточно экзотики?)

Ну вот, вопрос ТС решен

А вот и не факт! Экспрешаны хреново дружат с JS, т.е. они могут сломать его работу, так что всё это очень хлюпко.

ну судя по всему, здесь случилось все хорошо

Ну не знаю, у меня лично этот пример не пашет, всё перекосило + браузер завис вообще. Так что пока не увижу готовое, работающее решение - не поверю.

[sigma77]

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

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

[psywalker]

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

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

Вот именно, кстати. Самый точный и надёжный вариант.

[Kerny]

Наверное вы что-то не так делаете.

Скоренько накидал два варианта http://jsfiddle.net/tkzQX/ Ничего никуда не съезжает.

Спасибо помогло, правда все равно когда слишком много дивов они не помещаются (из-за маргин-ригхт=20, но без него ни как) попробую сделать с помощью жава.