Фон картинкой в div-ах - НЕ ПОЛУЧАЕТСЯ!

[alexadesigns]

Ситуация такая:

Есть изображения: 1 - GIF шириной 1 рх и высотой 20 рх, 2 - логотип

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

Всё вроде ничего, но последний div съезжает вниз

вот код:

<div id="banner">
    	<div id="leftline"> <img src="images/BlancSpacer.gif" alt=""> </div>
 	<div id="logo"> <img src="images/BlancSpacer.gif" alt=""></div>
 	<div id="rightline"><img src="images/BlancSpacer.gif" alt=""></div>
 </div>



и стиль CSS

#banner {
 width:100%;

}
#leftline {
 float:left;
 width:410px;
 height:20px;
 background-image: url(images/alexadesignslogo_line.gif);
}
#logo {
 width:260px;
 height:36px;
 background-image: url(images/alexadesignslog.gif);
 background-repeat:no-repeat;
 margin: auto;
}
#rightline {
 float:right;
 width:410px;
 height:20px;
 background-image: url(images/alexadesignslogo_line.gif);
}

Скрин приложил.

Помогите, кто чем может, пожалуйста!  hmy:

Проблему с отображением фоновой картинки я решил, а вот последний div по прежнему сползает :wacko:

 

[LeopART]

Похоже суммарная ширина не влезает просто во внешний див.
Я бы сделала проще - один див 100% с бэкграундом-полосой, по середине сверху - логотип.
Тогда и однописксельный гифчик не понадобится.

 

[Hovard]

Положите логотип с серыми полями слева и справа как на эскизе через тег img в div. А этому диву:
DIV{
text-aligne:center;
backgound: url("zebra.gif") repeat-y 0 0;
}

где zebra.gif - 1pz вертикальный срез чередующихся полосок.

Но на печать бекграунд не уходит.