Moving Image Within Nested Div - html

Question

I have been looking this this for about a half hour, and I cannot figure out what I am doing wrong...
I have nested divs, like this:
<div id="header">
<div id="header_left"><img src="~/images/image1.png"></div>
<div id="header_right"><img src="~/images/image2.png"></div>
</div><!--End Header-->
Basically, my nested divs split the screen horizontally into two equal parts, left and right.
Image1 is a logo and takes up most of header_left
Image2 is a small image, and I am trying to get it to move to the bottom right corner of header_right.
Here is my CSS:
#header{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}
#header_left{
float: left;
width: 50%;
}
#header_right{
float: right;
height: 100%;
width: 50%;
position: absolute;
bottom: 0;
right: 0;
}
As it stands right now, image2 is in the top left hard corner of header_right, and I cannot get it to move anywhere.
Any help appreciated!!!!

Answer 1

That should do it. You must position the img using a separate rule, i.e. #header_right > img
#header {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}
#header_left {
float: left;
width: 50%;
}
#header_right {
right: 0;
position: absolute;
bottom: 0;
}
#header_right > img {
float: right;
}
<div id="header">
<div id="header_left">
<img src="~/images/image1.png">
</div>
<div id="header_right">
<img src="~/images/image2.png">
<img src="~/images/image3.png">
</div>
</div>
<!--End Header-->

Answer 2

A good starting point would be to select not just the div container, but also the images as follows:
#header_left img{
float: left;
width: 50%;
}
#header_right{
float: right;
height: 100%;
width: 50%;
}
#header_right img{
position: absolute;
bottom: 0;
right: 0;
}