Hello, I am a newbie in web designing. For For the first time i've planned to code a very simple looking layout and i choosed to code a google.com layout. My screen resolution is 1336*768 (Home pc) and 800*600 (at college), I've coded the layout at home and it was perfect in my screen when i took that to the college and viewed in their screen the buttons are looking like attached and some texts have been misplaced. Here is my script <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body { background-color:#FFFFFF; margin:0px; overflow-y:scroll; } /*=========================Main navigation============================*/ .menu ul { word-spacing:7px; padding-left:1%; } .menu ul li { display:inline; list-style:none; margin-bottom: 2px solid #6CF; line-height:25px; } .menu ul li a { color:#06F; font-size:14px; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; font-weight:500; } .menu ul li a:hover { text-decoration:underline; } /*=========================Navigation current page============================*/ a.active { font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#222; font-weight:bold; } #logo { top:143px; margin-left:41%; position:absolute; border:0px; } #logo h1 { margin-left:77%; position:relative; color:#555; font-size:15px; line-height:0px; font-family:Arial, Helvetica, sans-serif; } /*=========================Search box============================*/ #search { top:250px; margin-left:29%; background: -moz-linear-gradient(top, #DDD, #FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#DDDDDD', endColorstr='#FFFFFF'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#DDDDDD', endColorstr='#FFFFFF')"; background: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(#FFFFFF)); position:absolute; border:1px solid #BBB; height:38px; width:508px; color:#AAA; padding-left:5px; } /*=========================Search tools============================*/ .search_tools ul { margin-left:65%; padding-top:191px; } .search_tools ul li { list-style:none; } .search_tools ul li a { color:#06F; font-size:12px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; } .search_tools ul li a:hover { color:#06F; text-decoration:underline; } /*=========================Search buttons============================*/ .google_search { background: -moz-linear-gradient(top, #FFFFFF, #DDD); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD')"; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD)); height:15px; width:95px; text-align:center; padding:12px; color:#888; font-family:Arial, Helvetica, sans-serif; font-size:14px; border:1px solid #AAA; top:300px; position:absolute; margin-left:37%; text-decoration:none; } .google_search:hover { background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC')"; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); } .google_search:active { background: -moz-linear-gradient(top, #DDD, #FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF')"; background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FFFFFF)); text-decoration:none; } .lucky_search { background: -moz-linear-gradient(top, #FFFFFF, #DDD); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD')"; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD)); height:15px; width:115; text-align:center; padding:12px; color:#888; font-family:Arial, Helvetica, sans-serif; font-size:14px; border:1px solid #AAA; top:300px; position:absolute; margin-left:48%; } .lucky_search:hover { background: -moz-linear-gradient(top, #FFFFFF, #CCCCCC); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC')"; background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC)); } .lucky_search:active { background: -moz-linear-gradient(top, #DDD, #FFFFFF); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF')"; background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FFFFFF)); } /*=========================Language settings============================*/ #language ul { margin-left:21%; padding-top:80px; } #language ul li { list-style:none; display:inline; } #language ul li a { color:#06F; text-decoration:none; font-size:14px; font-family:Arial, Helvetica, sans-serif; } #language ul li a:hover { color:#06F; text-decoration:underline; } /*=========================Google's Services============================*/ #services ul { margin-left:32%; color:#AAA; } #services ul li { list-style:none; display:inline; } #services ul li a { color:#06F; text-decoration:none; font-size:14px; font-family:Arial, Helvetica, sans-serif; } #services ul li a:hover { color:#06F; text-decoration:underline; } /*=========================Footer Copyright============================*/ #copyright ul { margin-left:28%; } #copyright ul li { list-style:none; display:inline; } #copyright ul li a { color:#06F; text-decoration:none; font-size:14px; font-family:Arial, Helvetica, sans-serif; } #copyright ul li a:hover { color:#06F; text-decoration:underline; } a#copyright { color:#AAA; font-size:14px; font-family:Arial, Helvetica, sans-serif; } #background-image a{ color:#06F; padding-left:1%; text-decoration:none; } #background-image a:hover { text-decoration:underline; color:#06F; } </style> </head> <body> <div class="menu"> <ul> <a class="active"><li>Web</li></a> <li><a href="#">Images</a></li> <li><a href="#">News</a></li> <li><a href="#">Orkut</a></li> <li><a href="#">Gmail</a></li> <li><a href="#">Maps</a></li> <li><a href="#">Translate</a></li> <li><a href="#">Moreâ–¼</a></li> <ul style="float:right; padding-right:30px;"> <li style="text-align:center; word-spacing:0px;"> <a href="#">iGoogle</a></li> <li style="text-align:center; word-spacing:0px;"> <a href="#">Search Settings</a></li> <li style="text-align:center; word-spacing:0px;"> <a href="#">Sign in</a></li> </ul></ul> </div> <div id="logo"> <a href="#"><img src="http://i56.tinypic.com/10ni54g.jpg" alt="google.com" > </a><h1>india</h1></div> <input type="text" name="Search" id="search" title="search" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}"/> <div class="search_tools"> <ul> <li><a href="#">Advanced Search</a></li> <li><a href="#">Search tools</a></li> </ul> </div> <a href="#"><div class="google_search">Google Search</div></a> <a href="#"><div class="lucky_search">I'm Feeling Lucky</div></a> <div id="language"> <ul> Google.co.in is offered in: <li><a href="#">Hindi</a></li> <li><a href="#">Telegu</a></li> <li><a href="#">Bengali</a></li> <li><a href="#">Marathi</a></li> <li><a href="#">Tamil</a></li> <li><a href="#">Gujarati</a></li> <li><a href="#">Kannada</a></li> <li><a href="#">Malayalam</a></li> <li><a href="#">Punjabi</a></li> </ul> </div><br /> <div id="services"> <ul> <li><a href="#">Advertising Programs</a></li> <li><a href="#">About Google</a></li> <li><a href="#">Go to google.com</a></li> </ul> </div><br /> <div id="copyright"> <ul> <a id="copyright">© 2011 -</a> <li><a href="#">Privacy</a></li><a id="copyright"> | Designed By Santhosh and Karthik | Coded By: Karthik</a> </ul> </div><br /> <div id="background-image"><a href="#">Change background image</a></div> </body> </html> Code (markup): Where have i made the mistake? What should i do to make this fit in all kind of screen resolution?