Ширина элемента по соседнему без использования ID
 

Есть div по ширине окна.
В него добавляются динамически через jquery элементы. Сколько будет этих элементов и какой они будут ширины, неизвестно.
Надо добавить последний div, заполнивший собой остаток до правого края родительского, изменяющийся при изменении размера окна.

Дело осложняется тем, что родительских div'ов может быть несколько.

При создании я имею jquery'евские объекты, которые и выкладываются. Задавать объектам ID нереально, это надо громоздить целую систему именования. Наверняка как-то можно задать css таким образом, чтобы width у последнего div'а был динамическим, но вот как?

Использоваться будет только под IE, DOCTYPE //W3C//DTD HTML 4.01//EN, так что можно использовать expression, но как их задать в jquery?

А причем тут ID вообще?
Используй либо таблицу (можно просто css display:table-cell) либо когда добавляешь элемент, пересчитывай ширину заполнителя и обновляй ее.

var parent = $('div')//это твой родительский див
var child = div.children('div');//это дивы внутри
var childW;
child.each.function(){
childW = childW +$(this).width();//ширина всех child
}

var newDiv=$('<div>,{id:'cap'}').css({width:parent.width()-childW});
paren.append(newDiv);

Это при вставке последнего дива
при ресайзе окна, вычислять ширину всех дивов кроме него, и изменять его ширину соответственно

В конечном итоге к тому и прихожу, что рассчитываю размер по onresize. А хочется тупо в css expression записать и не думать больше об этом.

Какая разница между window.onresize = doResizing и expression: "doResizing"? Экспрешны тормозят сильно, потому что вызываются чаще чем нужно. А так ты можешь навешать расчеты только на нужное событие. Ну не прелесть ли?

Есть вариант проще. Если они все добавляются в строку, то задавать им float:left, а последний оставить без ширины и float - он сам растянется как надо.

<div>
    <div style="height:100px; background:#aaf; float:left; width:200px;"></div>
    <div style="height:100px; background:#faa; float:left; width:50px;"></div>
    <div style="height:100px; background:#afa; float:left; width:100px;"></div>
    <div style="height:100px; background:#000"></div>
</div>

Aetae,
так он же растянется на всю ширину страницы?

рони, 0_о? На всю ширину контейнера же...

<div style="width:70%;">
    <div style="height:100px; background:#aaf; float:left; width:200px;">1</div>
    <div style="height:100px; background:#faa; float:left; width:50px;">2</div>
    <div style="height:100px; background:#afa; float:left; width:100px;">3</div>
    <div style="height:100px; background:#aaa">4</div>
</div>

Aetae,
ну контейтера а контейнер непонятно зачем но данное ниже условие в этом случае невыполняется

рони, не понял о чем ты, если честно.)

Это не совсем так. Он не растянется как надо, он растянется на всю ширину. Просто левая его часть будет перекрыта флоатнутыми блоками.
Интересное решение, уже знаю, где его применю, спасибо!

:write:
вариант решения на jquery -- если ширина блоков не динамическая -- пересчитывать css добавленного блока при изменении размера окна нет необходимости.
http://learn.javascript.ru/play/2VPmL

В том-то и дело, что не растягивается последний div самостоятельно. Он пустой, там просто в css background-image c repeat-x. Типа отчёркивания.

рони, это структура, похожая на вкладки у Chrome, например. Ширина каждой вкладки зависит от содержимого.

Вот так сделал на $(window).resize

var Size  = 0;
$('.ClassName').each (function () {
   if ($(this).is (':visible')) {
      Size = $(this).parent ().width ();
      $(this).parent ().children ().each (function () {
         if ($(this).attr ('class') != 'ClassName') Size = Size - $(this).width ();
      });
      $(this).width (Size);
   }
});

Mel, прежде чем дальше мудрить, нельзя ли просто использовать overflow: hidden?

<style type="text/css">
.container{
	position:relative;
	overflow:hidden;
	
	width: 70%;
	border: 1px solid #000;	
}
.container:after{
	content:'';
	
	display:inline-block;
	background:url(http://javascript.ru/forum/images/reputation/reputation_plus.gif) repeat-x;
	
	position:absolute;
	top:0px;
	bottom:0;
	
	width:100%;
}

.container div{
	height:100px;
	float:left;
	
	padding: 5px;
}
</style>

<div class="container">
	<div style="background:rgba(20,20,255,.5);">Контент</div>
	<div style="background:rgba(20,255,20,.5);">разной</div>
	<div style="background:rgba(255,20,20,.5);">длины.</div>
</div>

Вот я балбес-то!
Твой код не заработал, но натолкнул на мысль: а за каким мне вообще этот дополнительный DIV нужен, если я могу контейнеру сделать background-image?

Короче, сам себе мозг запудрил.
Всем спасибо!