I'm designing a website. My monitor's resolution is 1280 x 1024 and I usually use Firefox for developing. This is how it looks and should look. This one is the correct one.
But there's a slight change when viewed in Chrome in the same monitor. Notice the right bottom corner.
Things get even worse when viewed in a another monitor with a different screen resolution. This is my screen at work which's resolution is 1366 x 768.On Firefox
On Chrome
As you can see, the layout is messed up pretty bad. Below is the code.HTML\[code\]<img id="yellowRing" src="http://stackoverflow.com/questions/14462107/images/about_rings/yellow_ring.png" /><img id="magentaRing" src="http://stackoverflow.com/questions/14462107/images/about_rings/magenta_ring.png" /><img id="blueRing" src="http://stackoverflow.com/questions/14462107/images/about_rings/blue_ring.png" /><div id="aboutCaption"> <p>Our Team</p></div><div id="team"> <div class="member"><a data-member="one" href="http://stackoverflow.com/questions/14462107/#"><img src="http://stackoverflow.com/questions/14462107/images/team/one_thumbnail.png" /></a></div> <div class="member"><a data-member="two" href="http://stackoverflow.com/questions/14462107/#"><img src="http://stackoverflow.com/questions/14462107/images/team/two_thumbnail.png" /></a></div> <div class="member"><a data-member="three" href="http://stackoverflow.com/questions/14462107/#"><img src="http://stackoverflow.com/questions/14462107/images/team/three_thumbnail.png" /></a></div> <div class="member"><a data-member="four" href="http://stackoverflow.com/questions/14462107/#"><img src="http://stackoverflow.com/questions/14462107/images/team/four_thumbnail.png" /></a></div></div>\[/code\]CSS\[code\]#yellowRing { position:absolute; left:1200px; bottom:-1300px; z-index:2; }#magentaRing { position:absolute; left:1600px; bottom:-1100px; z-index:3;}#blueRing { position:absolute; left:2160px; top:500px; z-index:4;}#aboutCaption { position:absolute; left:2430px; top:-50px; z-index:4; line-height:2.2em;}#aboutCaption p { font-weight:lighter; text-align:right; color:#FFF; font-size:55px;}#team { position:absolute; left:2135px; top:90px; width:432px; height:110px; z-index:4;}.member { position:relative; height:95px; width:95px; margin:8px 8px 8px 0px; z-index:5; display:inline-block;}.member:nth-child(1) { margin-left:8px; }.member img { height:95px; width:95px; }\[/code\]This website only scrolls horizontally. My question is, why this is happening? And what should I do to make the layout consistent despite the screen size or the resolution? Or do I have to go about the responsive design and include multiple CSS files per benchmark?Thank you.