Resizing images in column layout with css - css

Question

I'm trying to create a web page with a two column layout. One aspect of it, is that images can be resized to take up half the column width. I use some CSS as follows
.columnWrapper {
float: left;
width: auto;
}
.sidebar1 {
float: right;
width: 33%;
padding: 0 20px 0 10px;
}
.main {
float: left;
width: 66%;
padding: 0 20px;
border-left: none;
border-right: solid 1px rgb(153,153,153);
}
footer {
clear: both;
}
nav ul, header h1, footer p, .contentWrapper {
max-width: 1200px;
margin: 0 auto;
}
img {
max-width: 100%;
}
img.half {
max-width: 50%;
}
img.left {
float: left;
margin: 0 10px 10px 0;
}
img.right {
float: right;
margin: 0 0 10px 10px;
}
When I try to resize the images in the html using markup like the following
<div class="contentWrapper">
<div class="columnWrapper">
<!-- main content goes here -->
<article class="main">
<img src="images/synergy2.jpg" alt="Synergy" class="half right">
<h3>About us</h3>
<p>blah blah blah</p>
</article>
<!-- first sidebar goes here -->
<aside class="sidebar1">
</aside>
<!-- end column wrapper -->
</div>
<!-- end content wrapper -->
</div>
It works as I expected on Chrome, but Firefox has a problem, in that the image isn't resized. Is there a problem with the CSS or is it a browser issue? Thanks.
Another thing I was wondering, is there a simple way to make sure that the columns have a minimum height. If there isn't much content the footer ends up too high and looks strange. Thanks.
I put up a sample web page with the html / css in question
http://adjk3543.appspot.com/aboutus.html

Answer 1

Apply a width to your columnWrapper:
.columnWrapper {
float: left;
width: 100%;
min-height: 600px;
}

Answer 2

I too found the same solution as #3dgoo has given. So Adding footer solution here too. You have to do some CSS hack to align footer at bottom always irrespective of content on page.
Check this out CSS Stick Footer
This definitely works. I have used many times.
Make sure you understand the logic here.