Resizing images in column layout with css

[Ecornewen]

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\[code\].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;} \[/code\]When I try to resize the images in the html using markup like the following\[code\]<div class="contentWrapper"> <div class="columnWrapper"><!-- main content goes here --><article class="main"> <img src="http://stackoverflow.com/questions/15514009/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>\[/code\]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 questionhttp://adjk3543.appspot.com/aboutus.html