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; 
}

Solution 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.

Solution 2

position: fixed is putting the images over the text. Keep the images inline if you want to text to show around them.

Solution 3

This is happening because you're using position: fixed; - when you do that, the element takes up no space in the layout, and goes on top of statically positioned elements (the default). Your float: left; is doing nothing here, since you can't have an element that floats and is fixed position. You can either fix this by using margins and/or padding to ensure a minimum size, so that the fixed elements are always over top of the margins/padding. Or you can actually use float, which will make the content flow around the images.