How to scale images with browser resizing on fluid theme

I have been searching Google and the WP forum for an answer to this but may not be using the right search terms to find the solution.

I am using Minimalist Fever 10 for a theme. It is a fluid, two-column layout. The columns resize beautifully when I reduce the browser size (1/4 screen, 1/2 screen, etc.) Unfortunately, the images in the left column (content) do not scale down along with the rest of the content when I make the browser smaller; they instead overlap the sidebar on the right.

Separately, when I enlarge or reduce viewing content in IE, everything scales beautifully, but in Firefox, the images do not scale well at all (enlarging causes sidebar overlap, reducing makes the images disproportionately small).

I cannot figure out how to scale these content images with the browser:

1) When I resize the browser; and
2) When I enlarge or reduce the size of the content in my browser.

I am not even sure this is possible, given all I have read, particularly the wp forum discussion about fixed width vs fluid themes.

The image that I hard-coded into my sidebar.php file scales great, and I suspect a header image would scale well, too. The images that will not scale, however, are part of the content of just a couple of pages. I hope there is a way to make images inside of the content in a fluid theme scale proportionately up and down with browser screen resizing and/or with browser content zooming.

EXISTING CODE
Here’s the odd way I forced the images to at least scale to fit on monitors ranging from minis to 15.4″ to 17″ (before this, some browsers would drop these content images below the sidebar, I assume because the image was too big.):

*STYLE SHEET – created an image class making width 100% (img#background {width:100%}

*PAGE CONTENT – created divs with tables with divs

<div style=”position:absolute;z-index:1″>
<table border=”0″>
<tbody>
<tr>
<td>
<div style=”position:relative”><img id=”background” src=”bigimage1.jpg” border=”0″></div></td>
</tr>
</tbody></table>
</div>

<div style=”position:absolute;z-index:2″>
<table border=”0″>
<tbody>
<tr>
<td width=”25%”><img class=”alignright” title=”ssbook” src=”linkimage1.png” /></td>
<td width=”25%”><img class=”alignright” title=”pdblog” src=”linkimage2.png” alt=”” /></td>
<td width=”25%”>
<img class=”alignright” title=”image011″ src=”linkimage3.png” alt=”” /></td>
<td width=”25%”><img class=”alignright” title=”image017″ src=”linkimage4.png” alt=”” /></td>
</tr>
</tbody></table>
</div>

I am not defending this nutty code; it is just the 400th variation that finally worked. If there is a cleaner way, I am here to learn about it! I have tried adding 100% width to every div and to the tables. Adding it to the div did nothing; adding it to the table overlapped everything into the side bar. I cannot find a width setting for the left column to doctor and don’t know what to add to fix.

Any ideas, tips or fixes for this?