Выровнять 2 изображения, один справа справа налево внутри div

Question

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

JsFiddle

Вот мой HTML:

<div class="header"> 
<img id ="ttl" src="Home_files/images/ttl.png"> 
<img id ="se" src="Home_files/images/se.png"> 
</div> 

и CSS:

.header { 
position: relative; 
top: 0%; 
height: 20%; 
} 
/*Header CSS*/ 
img#ttl { 
position: relative; 
top:50%; 
height: 50%; 
left: 0px; 
} 
img#se { 
position: relative; 
top:60%; 
height:30%; 
vertical-align:right; 
margin-right: 2%; 
} 

PS: Я пытался float:right;. Он работает в Chrome и FF, но не в IE. И, конечно, у этого div есть родительский div. Но я не думаю, что это будет проблемой.

Answer 1

Вы можете обернуть изображения внутри относительной емкости позиции и использовать position: absolute; расположить их в нижнем левом и нижнем правом углу

Demo

<div class="wrap"> 
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
</div> 

div.wrap { 
    width: 600px; 
    border: 1px solid #f00; 
    height: 300px; 
    position: relative; 
} 

.wrap img { 
    border: 1px solid blue; 
    position: absolute; 
    bottom: 0; 
} 

.wrap img:nth-of-type(1) { 
    left: 0; 
} 

.wrap img:nth-of-type(2) { 
    right: 0; 
} 

Примечание: Am использования nth-of-type для выбора изображений, так что я не должен объявлять классы для каждого изображения, если вы хотите поддерживать старые браузеры, вам нужно добавить класс для каждого изображения и заменить :nth-of-type на тех классов

Answer 2

попробовать этот

<div class="header"> 
    <div class="left"><img id ="ttl" src="Home_files/images/ttl.png"></div> 
    <div class="right"><img id ="se" src="Home_files/images/se.png"><div> 
</div> 

CSS

.left{ 
    float:left; 
} 
.right{ 
    float:right; 
} 

Demo