Displaying two images on opposite sides

I have a rectangle stretching out from left to right. I want to display two images inside it on opposite sides. What I came up with is the following:

<div style="background: url('images/Gulab.jpg') no-repeat #040406; height: 45px; width: 100%;">
	<div style="background: url('images/Swaraj.jpg') right no-repeat; height: 45px; width: 100%; float: right; display: inline; text-align: right;">
	</div>
</div>

Code (markup):

Isn't there a better way to do this? It does what I need to do for the time being, but I definitely want to code HTML more efficiently ... and more ... cleanly.

( I'm using this code on this website. )

 

style float left, right.

 

Because you have this:
width: 100%; float: right;
nothing is working except because you have set the background position of the image to "right" so you might as well get rid of "width: 100%; float: right; and display: inline; : )

In fact, this is what you could do:

(container somewhere obviously):
<div>
<div></div>
</div>
hopefully there's stuff in there because otherwise it's stoopid HTML : )

div {
background: url(firstimage.gif) 0 0 no-repeat;
}
div div {
height: 45px; (cause with bg images, there's no content here to make the divs tall enough on their own...)
background: url(secondimg.gif) 100% 0 no-repeat;
}

Instead of 0 0 and 100% 0 you can also use left top and right top.