CSS: Изменение стиля на основе ширины экрана

Question

Одна часть моего сайта, есть 3 вещи: 2 картинки и один div. Ширина составляет 100%, а высота - 14%. Изображения устанавливаются на 100% высоты в этой области. Я хочу, чтобы последний div автоматически изменял размер до оставшейся суммы. Вот код:

<div id="header"> 
<img src="foo.jpg" class="logo"> 
<img src="bar.jpg" class="logo"> 
<div id="clock"> 
</div> 
</div> 

и CSS

#header: width: 100%; 
height: 14%; 
} 
#clock { 
position: absolute; 
left: 75%; 
top: 0.1%; 
} 
.logo { 
height: 100%; 
} 

Я хочу, чтобы последний ДИВ, чтобы забрать в конце 2-го изображения независимо от того, что. Как я могу это сделать?

Я рассматривал возможность использования JavaScript, как

var img1=[w,h];//I know this 
var img2=[w,h];//I will put the actual #s 
var w=screen.availWidth; 
var h=document.getElementById("header").style.height; 
var realw1=(h/img1[1])*img1[0]; 
var realw2=(h/img2[1])*img2[0]; 
var remaining=w-(realw1+realw2); 
document.getElementById("clock").style.width=remaining; 

Или

document.getElementById("clock").style.width=screen.availWidth-(((document.getElementById("header").style.height/img1h)*img1w)+((document.getElementById("header").style.height/img2h)*img2w)); 

Я предпочел бы только CSS, но я буду использовать JavaScript, если я должен.

Answer 1

Всего float:left Фотографии? Что у вас есть div # clock?

Answer 2

EDITED

Этот CSS скрывает часы за логотипом, когда изменение размера достаточно мал.

#header{ 
    position: relative; 
    width: 100%; 
    height: 14%; 
    white-space: nowrap; 
} 
#clock { 
    position: absolute; 
    top: 0px; 
    left: 75%; 
    width: 25%; 
    z-index: -1000; 
} 
.logo { 
    height: 100%; 
} 

Если вы хотите изменить ширину часы, #clock.left + #clock.width должна равняться 100% или меньше, чтобы предотвратить #clock «прорваться» на правой стороне #header.

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