Три div'a в одном диве горизонтально.

[tarkinsky]

Ребят а подскажите как сверстать такую штуку (смотри скрин).

ФОТО

Вот HTML:

<div id="t0">
 <div id="t1"> </div>
 <div id="t2"> </div>
 <div class="t3"> </div>
</div>

Мне нужно чтобы блок 1 был 100 px, блок 3 - был 100 px, блок 2 растягивался на все остальне пространство.

Проблема в том что они не находятся на одной линии (1-ый стоит как и должен стоять, а вот второй, почему то смещается по горизонтали вниз (когда должен быть на одной линии с первым), выходя за слой t0)

Подскажите как сделать?

Спасибо.

Edited January 24, 2012 by tarkinsky

[Gaspode]

Второй с третьим поменяйте местами в разметке — проще всего так.

когда должен быть на одной линии с первым

Не должен. Курите, например, Мейера, главу про флоаты.

Edited January 24, 2012 by Gaspode

[tarkinsky]

Второй с третьим поменяйте местами в разметке — проще всего так.

когда должен быть на одной линии с первым

Не должен. Курите, например, Мейера, главу про флоаты.

Менять без вариантов нужно именно так((

[Gaspode]

Позиционируйте тогда. Как пример:

#t0 { position: relative;}
#t1 { position: absolute; left: 0; width: 100px;}
.t3 { position: absolute: right: 0; width: 300px;}
#t2 { position: absolute: left: 100px; right: 300px;}

Высоту сами подгоните, как вам там нужно.

Edited January 24, 2012 by Gaspode

[bob_24]

http://jsfiddle.net/qr9Xf/ так? Edited January 25, 2012 by bob_24