Question

When i make websites, it fits on my screen, but when i open the website on another screen, it doesn’t work correctly (The divs overlaps eachother). It’s the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it’s still the same.

Any answers, why this is happening?

Container CSS code:

#container
{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

I put it into HTML like this:

<div id="container">
Content goes here
</div>

EDIT: Guys, i don’t think you understand me. When i’m on another screen resolution, all the divs moves. I think everything moves, if i’m not completely wrong. I would like to know the real way of doing this. What do you do?

http://i49.tinypic.com/8wwo6r.jpg

http://i48.tinypic.com/359ydc9.jpg

FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn’t make myself clear enough.

Answer 1

You can use percentages instead of pixel.

#container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

---

You can figure out percentages having screen resolution and the size you want using this forumla:

WidthPercentage = ContainerWidth / ScreenWidth * 100

So for your example if your screen resolution is 1360×768:

WidthPercentage = 960 / 1360 * 100 = 70.5%

---

This is called responsive design.

You can find some guidelines here and some good articles here.