html - Fixed size element based on screen resolution -

i want deliver webpages containing of 2 divs, fixed size (does not depend on browser window size). however, size should different different screen resolution (1920x1080 vs 1440x900). if user maximize browser window, see whole webpage.

an example:

for 1920x1080: div have width 1600 1400x900: div have width 1000

what easiest way this?

#group {     position: absolute;      top: 300px; left: 0;      bottom: 0;      width: 410px; height: 440px;     background: black;      display:inline-block; }  #batch {     position: absolute;      top: 10px; right: 10;     bottom:0; left:420px;      width: 1225px; height: 820px;      background: black;  } 

you use media queries based on screen size. example below.

/* small devices, phones */  @media screen , (min-width : 480px) {     /* custom css goes here */ }  /* small devices, tablets */ @media screen , (min-width : 768px) {     /* custom css goes here */ }  /* medium devices, desktops */ @media screen , (min-width : 992px) {     /* custom css goes here */ }  /* large devices, wide screens */ @media screen , (min-width : 1200px) {     /* custom css goes here */ }