Placing two images into top corners of web page without overlapping

I need to place two images into top-left and top-right corners of a web page, with an empty space between them that would consume the available space, i.e. if the browser displaying the page is resized, the two images will stay at corners for as long as the browser window width is enough to display them both. If the browser is then resized below this width, a horizontal scrollbar should appear. The basic requirement is that the two images should never overlap, nor should they be rendered below each other.

To illustrate where I am now, here is a stripped-down HTML snippet:

<div class="header">
    <img src="left.png">
    <img style="float: right;" src="right.png">
</div>

This is enough to place the images at the right positions, but unfortunately they will appear below each other if the br开发者_Python百科owser window is resized so that its width is below the sum of widths of the two images.

CSS-based solution is preferable, of course; I'd avoid using <table> element if ever possible.

Do you know the size of the images? You might be able to do something like...

<div class="header">
    <img id="left">
    <img id="right">
</div>

#header
{
    position:relative;
    min-width: 200px;
}

#left
{
    position:absolute;
    width: 100px;
    top: 0;
    left: 0;
}

#right
{
    position:absolute;
    width: 100px;    
    top: 0;
    right: 0;
}

I haven't tested it but off the top of my head something like that should work ok.

You could use some HTML mark up like:

    <div class = "header">
        <div class = "leftimage"><img src="left.png"></div>
        <div class = "centerspace"></div>
        <div class = "rightimage"><img src="right.png"></div>
    </div>

and then use the following classes for style:

<style>
.leftimage{
float:left;
}
.centerspace{
float:left;
}
.rightimage{
float:right;
}
</style>