DIV se déplace lorsque le zoom avant et de zoom arrière dans le navigateur

J'ai un div suivants structure

 <div id="wrapper">
     <div id="header">
          <div id="storeFinder">
                        /*  html goes here */
          </div>
     </div> 
 </div>

maintenant, quand je zoom avant ou arrière à partir du navigateur, "storeFinder" se déplace vers la droite /gauche ...

J'ai cherché en ligne et a constaté que besoin d'un wrapper autour de la "storeFinder" de sorte qu'il ne bouge pas avec le <body> et en spécifiant le min-width peut également résoudre le problème.

dans mon cas, j'ai déjà un wrapper div et en spécifiant le min-width également force de m'aider.

chercher de l'aide ici très mal.

 #wrapper {
            background: white;
            background-position: 50% 0px;
            width: 984px;
            margin: 0px auto 0 auto;
            text-align: center;
        }

    #header {
        width: 960px;
        height: 60px;
        margin: 0 5px 2px 5px;
        text-align: left;
        background: white;
        display: block;
        position: relative;
     }

   #storefinderdropdown {
        position: absolute;
        top: 8px;
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 342px;
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }
+1 pour toutes les réponses et de l'aide fournies par vous, les gars...
Veuillez cocher la réponse correcte.

OriginalL'auteur patel.milanb | 2012-07-04

  1. 1

    Correcte de votre code CSS Travail Jsfiddle ici

    #wrapper {
            background: white;
            background-position: 50% 0px;
            width: 984px;
            margin: 0px auto 0 auto;
            text-align: center;
        }

    #header {
        width: 960px;
        height: 60px;
        margin: 0 5px 2px 5px;
        text-align: left;
        background: white;
        display: block;
        position: relative;
     }

   #storeFinder {
        position: absolute;
        top: 8px;
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 0px;
        left:342px;
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }
    Veuillez cocher la réponse qui s'est avéré être le plus proche.:)

    OriginalL'auteur xan

  2. 3

    Essayez de mettre un position: relative sur le parent. Qui va limiter le enfants les positions de l'absolu selon le parent et non pas, selon le document. Cet article donne plus de détails et d'exemples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    OriginalL'auteur Jason Ellis

  3. 1

    Essayez ceci:

    #storefinderdropdown {
        position: absolute;
        top: 8px;
    left: 342px; /*Add This*/
        float: none;
        width: 270px;
        height: 43px;
        border: 5px solid #F1F1EF;
        background: #F1F1EF;
        z-index: 10;
        margin: 20px 0 0 0; /* Change This*/
        font-size: 10px;
        font-weight: bold;
        text-indent: 3px;
        padding: 0;
   }​

    Peut-être que ce sera utile pour vous.

    n'aide pas...

    OriginalL'auteur SVS