CSS position: fixed

Question

I have position:fixed <div> that appears in the middle of the screen. When there are messages, a second position:fixed <div> is put next to the first <div>.

I'm finding on different screen sizes (say a netbook - small screen) the <div>'s sit on top of each other.

Is there a way to lock their position to each other? I tried using a fixed container to hold both of them, but they still moved.

 <div id="container">
    <div id="container"></div>
    <div id="container"></div>
 </div>

EDIT:

<div id="wrapper">
    <div id="container1"></div>
    <div id="container2"></div>
 </div>

CSS - container1 and container2 still move when I change the screen size.

#wrapper {
  position: fixed
}
#container1 {
  position: fixed
}
#container2 {
  position: fixed
}

do I need to use relative positioning on the container 1/2 divs?

Answer 1

Most importantly, id is unique. You cannot use id="container" on three different elements. Each must have their own id.

<div id="container">
    <div id="container"></div>
    <div id="container"></div>
</div>

Should be something like this...

<div id="wrapper">
    <div id="container1"></div>
    <div id="container2"></div>
</div>

Also, where is your CSS code?

If you don't want these things to push each other around as the window size changes, one method would be to specify the exact size and position of each container.

EDIT:

Again, without seeing an example of this page, a demo, or a better description of what you want, this is speculation.

You could put fixed position on the wrapper and then put an exact size and position on the <div>'s within.

Answer 2

The position: fixed CSS rule "fixes" the element's position on the screen. Once you set it to fixed, it will never move from the position you put it in. Since you're applying fixed to all of your elements, you're seeing the elements stack (likely in the top-left of your screen considering you're not providing a top or left value).

If you want the child elements to appear inside your fixed container, just don't add position: fixed to them and they'll sit inside the parent just fine.

Of course, all of this is pure speculation considering we can't see an example of your problem, nor your desired result.