Resizing image in floating divs

Question

I have two floating divs (left and right) nested in the mother div.

Floating divs display one image each.

Images must be resized to the maximum possible size without getting different sizes.

That's what I have.

HTML

<div id="mother">
    <div class="left">
        <img src="image.src" />
    </div>
    <div class="right">
        <img src="image.src" />
    </div>
</div>

CSS

#mother {
    width:80%;
    min-width:600px;
    max-width:1800px;
    margin:0 auto;
    display:block;
}
.left {
    float:left;
    min-width:300px;
    max-width:900px;
    width:100%;
}
.right {
    float:right;
    min-width:300px;
    max-width:900px;
    width:100%;
}
.left img, .right img {
    min-width:300px;
    max-width:900px;
    width:100%;
}

Answer 1

Your classes .left and .right both have width 100%. This means your divs are trying to get the same space in their container, so one will get below the other because they don't fit on the same row.

If I understand correctly your problem, you can fix it by changing the following classes:

.left {
    float:left;
    min-width:300px;
    max-width:900px;
    width:50%;
}

.right {
    float:right;
    min-width:300px;
    max-width:900px;
    width:50%;
}

I changed the width to 50% for this classes.