sizing images and/or divs

Hello Creatives.

I have just launched hilarykrishnan.com.

I am working on a 22" monitor, and it looks great on my system.
However, I have seen it on smaller screens and it does not look carefully composed (Content being significantly narrower than BG image).

The CSS for the divs are:

.nav {
float: left;
width: 33%;
left: 100px;
height: 800px;
background-image: url(images/nav%20bg2.png);
padding-top: 50px;
}
.con {
float: left;
width: 44%;
padding-top: 70px;
}

I am wondering if there is a way to express the width in %, but set a minimum width in pixels, so there is always a bit of text next to the photo on theaboutpage?

Or, is there a way to automatically resize the image if the browser window is below a certain width?

*Also: if you see any other potentially awkward situations with the site, feel free to let me know.

Thanks in advance, community.

--
iamshawnrice.com

Excellent.

Thank you very much, Fernando- your help is certainly appreciated.

--
iamshawnrice.com