Align Images Left & Right using CSS

I've got a very basic page that looks like this : JSFiddle - DEMO

Currently the image is centred on the wrapper 'Blue' DIV. This 'blue' DIV is centred on the page and needs to remain so.

What I'd like is to be able to have the 1st image aligned with the left edge of the DIV highlighted in Blue and then be able to put an image aligned to the right edge of the same Blue DIV.

I found a post on here that used this code :

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;
}

But that just seems to line up with the main container DIV, not the Blue DIV..

How can I do this properly ?

Thanks :)

Solution

Something like this?

(or alternatively)

HTML

<body>
    <div id="holder">
        <div id="logo" class='left'>
            <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
        </div>
        <div class='right'>
            <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
        </div>
        <div style='clear:both;'></div>
        <div id="wrapper"></div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    text-align:center;
    margin: 0px;
    padding: 0px;
    background: #fff;
    font-family:'Open Sans', sans-serif;
    font-size: 11pt;
    font-weight: 400;
    color: #fff;
}
#holder {
    margin :0 auto;
    display:inline-block;
    width: 850px;
}
.left {
    float:left;
}
.right {
    float:right;
}
#logo {
    align:middle;
    text-align:center
}
#wrapper {
    height:200px;
    position: relative;
    padding: 0em 0em 0em 0em;
    background: #fff;
    border: 1px solid blue;
}