CSS - My images are overlapping my text on a smaller screen size

Question

On my website the images overlap my main content text when on a smaller screen size. At home it was perfectly fine because my screen is much bigger but now I'm at college and it looks horrible.

Is there anything I could do to fix this?

#content {  
    font-size:16px;
    margin: 0 auto;
    width: 955px; 
}

Here is a picture of the problem: http://i776.photobucket.com/albums/yy41/tom14431996/problem-1_zpsa410ef94.png

As you can see the image overlaps the text.

This is an example code of how my first image is added:

#imageholder1 {
float: left;
left: 2%;
position: fixed;
top: 11%;
border: double;
border-color: #333;

}

And this is my text code:

#content {
    font-size:16px;
    margin: 0 auto;
    width: 955px; 
}

Answer 1

First of all, don't position your images with position: fixed; for your current situation. position: fixed; is for keep an element fixed on the screen so that it never moves. When you view your images on a smaller screen, the text must move somewhere, so it overlaps the fixed images.

Try setting a width to your text's class/id of something like 50% so it adapts to your screen width. I can help further if I can see some more html/css.

Try position: relative; on your images as well.