CODEWITHSUNDEEP
htmlcss
patel.milanb
patel.milanb

Reputation: 5992

DIV moves when zoom in and zoom out in browser

I have a following div structure

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

now when i zoom in or out from the browser, "storeFinder" moves right / left ...

I have searched online and found that need a wrapper around the "storeFinder" so that it does not move with the <body> and specifying the min-width also can solve the problem.

in my case, i already have a wrapper div and specifying the min-width also dint help me.

looking for help here very badly.

 #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;
   }

Upvotes: 4

Views: 27308

Answers (3)

Jason Ellis
Jason Ellis

Reputation: 576

Try putting a position: relative on the parent. That will confine the children's positions to be absolute according to the parent and not according to the document. This article gives more details and examples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 3

xan
xan

Reputation: 4696

Your correct CSS code Working Jsfiddle here

#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;
   }

Upvotes: 1

SVS
SVS

Reputation: 4275

Try this:

#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;
   }​

May be this will be helpful for you.

Upvotes: 1

Related Questions