Blogger HTML Image Alignment Problems

So I've recently been assigned to make an eportfolio website at school using blogspot. i've been havign a problem with a design of the site id like to fix.

1) this is how my site looks one my screen on my widescreen resolution. the RED square is the object i need help with.. its supposed to be a picture.




2) i also have a code which makes it fixed onto the screen so when i scroll down the picture goes down with it


3) However, when i change my screen resolution or make the browser window smaller, i get this.


see how it overlaps the text now?
Is there any possible way to make it so that it doesnt do that, and whenever i change the screen resolution or resize the window it forces a horizontal scrollbar?

What I'm looking for is, if any, the simplest solution possible, maybe a CSS code or whatever I can just copy and paste into my code or whatever, as I'm not too experienced with website design.
This is what i have for the image code right now.

CSS
img.one
{
position:fixed;
left:103px;
top:30px;
}

HTML

<img alt='picture' class='one' src='http://urlpichere.jpg'/>


Any help and or input would be greatly appreciated! thanks!
Even if i have to remove the effect of keeping the picture scrolling with scrollbar, and have the picture stationary, ill be very happy with as well. just as long as everyone sees the same website on different computers. ugh

how wide is the whole site including the red block?