placing two images inside div without overlapping when minimizing window

[webdevnewbie]

Hello,

I am new to this these forums, and I am also somewhat new to CSS. I have used tables in the past, mostly because that is what the IDE generated for WYSIWYG pages.

I need some help placing two images on the left and right sides inside a div without them overlapping when the user shrinks the browser window. I have a header div with two images using the img tag. I was able to place them to the left side and right side inside the div, respectively. But when I shrink the window, the right image moves towards the left image. How can I place two images in a header div, one to the left edge of the browser window and one to the right edge of the browser window, without anything being affected when I expand or shrink the browser window?

Here is the html:

<div style="border: 3px black dashed;" id="header">
<img src="logo.jpg" id="logo" />
<img src="stripes.gif" id="stripes" /><br />
</div> <!-- div#header -->

Here is the CSS for the div:

img#logo {
margin: 12px 0 8px 48px; padding: 0;
float: left;
}
img#stripes {
margin: -8px 0 8px 48px; padding: 0;
}
div#header {
width: 96%;
margin: 0; padding: 8px;
}