CODEWITHSUNDEEP
csshtml
Adam
Adam

Reputation: 20952

CSS position: fixed

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?

Upvotes: 3

Views: 1619

Answers (3)

Deepak Gupta
Deepak Gupta

Reputation: 11

you cant fix the position of your div like this. first of all you have to find the screen size for your parent div which contains that div u want in middle.like 

<div id="parent"> <div id="middle_div"></div> </div>
function getScreenSize()
{
        var winW, winH;
        winW = document.getElementById('parent').availWidth;
        winh = document.getElementById('parent').availHeight;
   }

this is how you vil get the size availabel for parent div.Then set the width and height of parent div according to it.now if you have width of parent div its easy to set middle_div in middle of parent div.

Upvotes: 0

Chris
Chris

Reputation: 10378

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.

Upvotes: 1

Sparky
Sparky

Reputation: 98748

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.

Upvotes: 4

Related Questions