Не могу сделать хидер из 3-х частей резиновый

Хочу заменить шапку на форуме, она состоит из 3-х частей: подложка, левая картинка и правая.

При большом разрешении 1920х1080 всё хорошо. Но когда уменьшается, появляется гориз. прокрутка.

Вот как на этом форуме http://www.jeepforum.com/forum/ это реализовано.

Уменьшая окно, исчезает правая картинка, если совсем уменьшить, левая уменьшается.

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

Код:

<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" id="header" class="header" style="background: url(/images/head-middle.jpg) repeat-x;"> // подложка растягивающая //

 

<tbody>

 

<tr>

 

<td align="left"> // левая картинка //

<img src="/images/head-left.png" border="0" height="150" width="1023" >

</td>

 

<td align="right" id="header_right_cell"> // правая картинка //

<img src="/images/head-right.png" border="0" height="150" width="477" alt="">

</td>

 

</tr>

 

</tbody>

</table>

Стили

.header {background: url(/images/head-middle.jpg) repeat-x;}

.header img {display:block;}

 

@media screen and (max-width: 1500px){

#header_right_cell img {display:none !important;}

}

 

@media screen and (max-width: 1500px){

#header_right_cell img {display:none !important;}

}

 

@media screen and (max-width: 980px){

.header img {height: 75px; width: auto;}

.header {background-size:75px 75px !important;}

}

 

@media screen and (max-width:480px){

.header img {height:auto; width:100%;}

}