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.