Небольшая проблема с div'ами

[zet-msh]

В общем суть такая, есть код

  <div class="mycity">
          <div class="lcity">
          </div>
          <div class="ccity">
                Тут выводим текст
          </div>
          <div class="rcity">
          </div>
  </div>

.mycity {
	width:300px;
	height:10px;
	margin-left:750px;
	margin-top:-15px;
}

.lcity {
	background:url(left_city.png) no-repeat;
	width:20px;
	height:26px;
}

.ccity {
              background:url(centr_city.png);
	width:30px;
	height:26px;
	margin-left:20px;
	margin-top:-21px;
}
	
.rcity {
	background:url(right_city.png) no-repeat;
	width:36px;
	height:26px;
	margin-left:auto;
	margin-top:-48px;
}

А теперь значит суть проблемы, левая картинка стоит на месте, просто отображает часть, в средней пишется текст, соответственно при изменении длины текста центральный блок либо увеличивается вправо, либо уменьшается влево, суть проблемы в том, что правая картинка должна ездить вместе с центральным, но она стоит на месте, то есть если текст длинный, то он просто ее закрывает своим бэкграундом. Как решить данную проблему?

[Stiv22]

С фиксированной шириной ничего ездить и не будет. И если высота контейнера 10 пикселей, то почему вложенные слои 26 пикселей?

Это сообщение отредактировал Stiv22 - 29.08.2012 - 11:05

[zet-msh]

Это просто пример кода
С фиксированной шириной нельзя, ведь длинна текста разная, а пишется он в одну строку, соответсвенно див центр резиновый. Есть какие нибудь варианты его прикрутить?

[bobo]

http://jsfiddle.net/hgKQH/

[sebastjan]

Я лично ничего не понял.
По нормальному надо исходить из дизайна.
Дизайнер формирует графический интерфейс.
Лучшее решение выложить скрин дизайна с описанием и тогда уж строить вёрстку а что и куда уезжает для меня загадка.