Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 11th, 2012  |  syntax: None  |  size: 2.35 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. html, how to make elements not shift when browser zooms?
  2. #in .html file
  3. <style type="text/css">
  4.     div.box {
  5.         position: relative;
  6.         height: 30px;
  7.     }
  8.     div.box p#id1 {
  9.         position: absolute;
  10.         margin-left: 0px;
  11.     }
  12.     div.box p#id2 {
  13.         position: absolute;
  14.         margin-right: 0px;
  15.     }
  16. </style>
  17. ...
  18. <div class="box">
  19.     <p id="id1">ID1</p>
  20.     <p id="id2">ID2</p>
  21. </div>
  22.        
  23. -------------------------------------------------------------
  24. |                                                           |
  25. |ID1                                                     ID2|
  26. |                                                           |
  27. -------------------------------------------------------------
  28.        
  29. ---------------------------------
  30. |                               |
  31. |ID1                         ID2|
  32. |                               |
  33. ---------------------------------
  34.        
  35. -------------------------------------------------------------
  36. |                                                           |
  37. |ID1                                                     ID2|
  38. |                                                           |
  39. -------------------------------------------------------------
  40. -----------------------------------------------------------
  41. |                                                         |
  42. |ID1                                                     I|
  43. |                                                         |
  44. -----------------------------------------------------------
  45. ---------------------------------
  46. |                               |
  47. |ID1                            |
  48. |                               |
  49. ---------------------------------
  50.        
  51. <style type="text/css">
  52.         div.box {
  53.             position: relative;
  54.             height: 30px;
  55.             min-width:400px;
  56.         }
  57.         div.box p#id1 {
  58.             position: relative;
  59.             margin-left: 0px;
  60.             display:inline-block;
  61.             float:left;
  62.             clear:none;
  63.         }
  64.         div.box p#id2 {
  65.             position: relative;
  66.             margin-right: 0px;
  67.             display:inline-block;
  68.             float:right;
  69.             clear:none;
  70.         }
  71.     </style>
  72.        
  73. div.box {
  74.     position: relative;
  75.     height: 30px;
  76.     width: 90%;
  77.     min-width: 500px;
  78.     }
  79.     div.box p#id1 {
  80.     float: left;      
  81.     }
  82.     div.box p#id2 {    
  83.     float: right;
  84.     }
create a new version of this paste RAW Paste Data