Question

I want to position the add div at the same place on any display whether physical dimensions of the displays are the same or not . How is it possible ?

<div id="iphone">
    <div id = "add" style="position:absolute; left:37%; top:23%; width:52%; height:77%; z-index:1">

           <iframe src='index.php/test.php' frameborder='1'; width='452%'; height='79%';scrolling='yes'; align='center';></iframe>
      </div>
</div>​

The css is :

#iphone 
{
width: 35%;
height: 100%;
margin: 0 auto;
margin-top: 5%;
padding-left: 1px;
background: url("/debug-console/images/img_iphone.jpg") no-repeat;
background-position:center;  
}
#add 
{
margin: 0 0 0;
border: 0;
}             

Any help will be deeply appreciated
Thanks in advance 🙂

Answer 1

position: fixed;
top: 50px;
left: 50px;

Will always make it be 50px from the top and left, regardless of anything, or use position: absolute; if you want it to scroll with the browser