two pictures align exactly the width of containing element - css

Question

I have two banner images, each of them has the same height but different width. Each one of them is nested in <a> tag (to make the images open a link) and the <a> tags are nested in <div> tag.
My problem is, I need these two images to sit next to each other and automatically adjust to the width of the <div> tag so that they fill exactly 100% of the <div> width, keeping the ratio of the individual image widths the same. The div tag is fluid (it resizes with the size of the screen) and I'd like these two images to be automatically adjusting so that they always fill exactly 100% of the div width. How do i do this using css.
Here is my html:
<div class='banner'>
<a class='mainBanner' href='Help.php?title=Help'><img src='banner1.png' alt='mainBanner' /></a>
<a class='openAccount' href='Profile.php?title=Registration'><img src='banner2.png' alt='openAccount' /></a>

Answer 1

As long as your images are not dynamic (ie. you know the widths in advance), you could do it like this:
<div class='banner'>
<a class='mainBanner' href='#'><img src='http://placekitten.com/200/200' alt='mainBanner' /></a>
<a class='openAccount' href='#'><img src='http://placekitten.com/300/200' alt='openAccount' /></a>
</div>
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a:first-child {
width: 40%; /* this image is 200px wide */
}
.banner a:last-child {
width: 60%; /* this image is 300px wide */
}
.banner a img {
width: 100%;
height: auto;
}
The combined widths of the sample images is 500px, so your percentages are 200 / 500 = .4 or 40% for the first and 300 / 500 = .6 or 60% for the second.

Answer 2

I would use percentage and float the images like so DEMO http://jsfiddle.net/kevinPHPkevin/6H4cV/
.clear {
clear:both;
width:100%;
}
.banner {
width:100%;
background:#000;
}
.mainBanner img{
width:70%;
background:#ff0;
display:block;
float:left;
}
.openAccount img {
width:30%;
background:#ccc;
display:block;
}

Answer 3

You'll have to use (or simulate) tables! :D
I didn't touch much of your html. I removed the white-space between the 2 <a> and I enclosed it in another div (with the class derp).
CSS :
div.derp {display:table; border:1px solid green;width:100%}
div.banner {background:light-blue;border:1px solid blue;display:table-row}
a {display:table-cell;border:1px solid red;}
img {display:block;width:100%}
And I made a demo too!

Answer 4

I would use:
.banner {
display: table;
width: 100%;
}
.banner a {
display: table-cell;
}
.banner a img {
width: 100%;
height: auto;
}
this way the two image width can have always different widths, as long as they have the same hight.
demonstration - resize result display to see the effect.
Hope it helped you!

Answer 5

height the same, different widths?
ok, so if you now two widths of this images too just make the percent and float left. For example if one image is 200px wide and another 300px wide just give 40% and 60% for both a (don't forget to add them also display block or even display inline block without float left) and give width 100% for both img's. if you don't know the width, you need to use javascript unfortunately.
very pseudocode because I am really tired.
a1.width = img1.width/(img1.width+img2.width)*100+%
a2.width = img2.width/(img1.width+img2.width)*100+%
and of course a - display:block and img's width:100%.
or something like this if you would like I can write it tomorrow but I am not sure is this answer you are looking for, so I am not doing it now.