Placing two images into top corners of web page without overlapping

Question

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 browser 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.

Answer 1

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>

Answer 2

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.