[Jakku]

So, hi.

I just began to design a new website. And once again I am facing this frustrating problem which I am unable to solve. Thousands of times searching and still no proper results. So the question is, how do I prevent these DIV- elements from colliding with each other when zooming the page? This is how my site is supposed to look, no matter if zoomed or not:


http://i.imgur.com/MBXtl.png - Original image

But, when I zoom it the following happens:


http://i.imgur.com/qcNKQ.png - Original image

As you see, the "blabla"- element collides with the other element. I want to prevent this from happening. Please, help me if you have any knowledge! Thanks in advance.

Oh, and here's the CSS code for that colliding "blabla"- element. Let me know if you need something else.

Код:

#news
{
  width:220px;
  height:500px;
  border: 3px solid white;
  margin-top:-710px;
  margin-left:150px;
}

EDIT: I just noticed http://sa-mp.com/ behaves this way aswell. The navigation is colliding with the centered content. This is annoying especially when you have a very large or either very small resolution.

[Zircon-Hosting]

position:fixed;
Use that on your CSS.

[Jakku]

I do not want the element to scroll with me throughout the page. So no, that's not a solution. Thanks anyways

[Michael@Belgium]

It should be obv with position what if you try this:

Код HTML:

position: absolute;

Or you have also

Код HTML:

position: relative;

[Jakku]

Either I am missing something or that is not the right solution for this.

Код:

#news
{
  width:220px;
  height:500px;
  border: 3px solid white;
  margin-top:-710px;
  margin-left:150px;
  position:relative;
}

Nope.