Search code examples
htmlcsspixel

If I set the pixels for a component , will it behave the same on every monitor?

Will the following css :

#search_bar {
  width: 300px;
  margin-left:475px;
  height:27px;
}

generate the same position of search bar on every mointor as in the following snapshot ?

enter image description here

Like units in percentage will show the size accordingly on every monitor,is it the same with pixels ? I mean I try to align the search box as visible in the snapshot in the center but I don't know if it will look the same on broader monitors than mine.

Solution

  • Neither monitors nor screen resolution have anything to do with how your element will be positioned. What matters is the width/height of the viewport (especially since desktop users don't always maximize their browser). If the viewport is only 300px wide, not only will your element not be centered, it will be so far to the right that it will appear off screen! If the viewport is 2000px wide, it will be woefully far to the left.

    Here are 2 options for perfectly centering an element no matter what the viewport size is.

    input.one {
    display: block;
    margin: 0 auto;
    width: 300px;
}

input.two {
    width: 300px;
    margin-left: -150px; /* half of the element's width */
    position: relative;
    left: 50%;
}

    http://jsfiddle.net/bGMck/