I have just completed designing my first website and now want to make it fluid. It works apart from 3 small problems;

1. The header image doesn't resize. I use the following css code;

#head-photo img{max-width: 100%;} *head photo is the division that the image is in.

I also tried to use img{max-width: 100%} immediately below the head-photo division.

What code do I need to get the image to resize?

2. I have a <hr/> to underscore the menu. when the site is resized This shows half way down the nav bar.
What do I need to do to get the hard return to show underneath the nav.bar?

3. I have a small image in a text box and used "align=left" and hspace="3" in the html code. I validated the code and this was rejected. The w3c validator recommends placing the code in a css file. I used the following code;

#main-box img.align-left {float:left;} * main box is the division that the image is in.

The image appears as it should but the text doesn't align to the top right of the image. What code do I need to use to correct this?

You can see the page here
If you resize the browser you can see the header image problem.

You can see the full css code here