Страница "уезжает" влево

[Garfunkel]

Есть такой шаблон - http://rghost.ru/32649991

При добавление большого количества текста в div "body_area" страница "уезжает" на пару десятков пикселей влево. Данный эффект заметен только если раскрыть страницу на весь экран в браузере (Maximize). Как можно это побороть? Спасибо.

Edited November 30, 2011 by Garfunkel

[Garfunkel]

Код CSS:

html, body { 
margin : 0; 
padding : 0; 
background : #fff url(../images/base_bg.png) repeat-x [top]; 
width : 100%; 
height : 100%; 
font-family : Arial, Helvetica, sans-serif; 
} 
* html #wrap { 
height : 100%; 
} 
p, td { 
font-family : Arial, Helvetica, sans-serif; 
margin-top : 0; 
font-size : 13px; 
} 
a img { 
border : 0; 
} 
a { 
color : #e30011; 
text-decoration : underline; 
} 
a:hover { 
color : #e30011; 
text-decoration : none; 
} 
a.hidden { 
text-decoration : none; 
color : #000; 
cursor : default; 
} 
form { 
margin : 0; 
padding : 0; 
} 
div.clr { 
clear : both; 
} 
ul { 
margin : 0 0 0 20px; 
padding : 0; 
list-style-type : square; 
line-height : 16px; 
} 
h1 { 
font-size : 21px; 
font-weight : normal; 
color : #e11924; 
margin : 5px 0 10px; 
} 
h2 { 
font-size : 16px; 
font-weight : normal; 
color : #000; 
margin : 2px 0 7px; 
} 
#wrap { 
position : relative; 
min-height : 100%; 
margin : 0 auto; 
width : 100%; 
} 
#page { 
width : 920px; 
margin : 0 auto; 
} 
#top { 
height : 93px; 
background : url(../images/header_bg_top.png) no-repeat [right, bottom]; 
position : relative; 
} 
#header { 
position : relative; 
background : url(../images/header_bg.jpg) no-repeat [right]; 
height : 154px; 
width : 920px; 
} 
#logo { 
position : absolute; 
margin : 15px 0 0 36px; 
} 
#company_name { 
font-size : 25px; 
font-weight : normal; 
text-transform : none; 
color : #000; 
position : absolute; 
margin : 34px 0 0 143px; 
} 
#company_name span { 
color : #e30011; 
} 
#menu { 
color : #fff; 
font-weight : bold; 
padding : 0; 
white-space : nowrap; 
height : 45px; 
background : url(../images/menu_bg.png) no-repeat; 
} 
#menu a { 
text-decoration : none; 
color : #fff; 
} 
#menu a:hover { 
color : #fff; 
text-decoration : underline; 
} 
.smenu td { 
padding : 55px 10px 21px 20px; 
height : 78px; 
font-size : 18px; 
color : #000; 
width : 295px; 
vertical-align : bottom; 
} 
.smenu td a { 
color : #000; 
display : block; 
text-decoration : none; 
} 
.smenu td#smenu1 { 
background : url(../images/smenu1.jpg) no-repeat; 
background-position : [0, 10px]; 
} 
.smenu td#smenu2 { 
background : url(../images/smenu2.jpg) no-repeat; 
background-position : [0, 10px]; 
} 
#contentwrap { 
position : relative; 
overflow : hidden; 
background : url(../images/header_bg_b.jpg) no-repeat [top, right]; 
width : 920px; 
margin : 0 0 20px; 
} 
#body_area { 
color : #000; 
text-align : left; 
padding : 0; 
vertical-align : top; 
float : right; 
width : 605px; 
} 
#sidebar { 
float : left; 
width : 295px; 
font-size : 12px; 
background : #eaeaea; 
} 
#sidebar h2 { 
display : block; 
background : url(../images/sidebar-h2.png) no-repeat; 
height : 45px; 
font-size : 18px; 
color : #fff; 
line-height : 43px; 
padding : 0 20px; 
overflow : hidden; 
margin : 0; 
} 
#sidebar .content { 
padding : 20px 20px 5px; 
} 
#sidebar .content p.data { 
color : #e30011; 
margin : 0; 
font-size : 11px; 
} 
#sidebar .content p { 
font-size : 12px; 
margin-bottom : 15px; 
} 
#sidebar .bottom { 
background : url(../images/sidebar_bottom.png) no-repeat; 
height : 10px; 
} 
#find_form { 
height : 27px; 
width : 238px; 
position : absolute; 
background : url(../images/find_bg.png) no-repeat; 
margin : 31px 0 0 500px; 
padding : 2px; 
overflow : hidden; 
} 
#find_form input { 
width : 174px; 
font-size : 13px; 
height : 22px; 
border : 0; 
padding : 0 3px; 
} 
#find_form img { 
float : right; 
} 
#footer { 
width : 920px; 
background : #c2a06b; 
position : relative; 
} 
#footer .top { 
height : 10px; 
background : url(../images/footer_top.png) no-repeat; 
overflow : hidden; 
} 
#footer .bot { 
height : 10px; 
background : url(../images/footer_bot.png) no-repeat; 
overflow : hidden; 
} 
#bottom_menu { 
color : #000; 
text-align : center; 
padding : 5px 15px 4px; 
font-size : 12px; 
} 
#bottom_menu a { 
color : #000; 
text-decoration : underline; 
padding : 0 10px; 
} 
#bottom_menu a:hover { 
color : #fff; 
text-decoration : underline; 
} 
#bottom_addr { 
color : #fff; 
text-align : center; 
padding : 4px 15px 5px; 
font-size : 11px; 
} 
#bottom_addr a { 
text-decoration : underline; 
} 
#bottom_addr a:hover { 
text-decoration : underline; 
}

И код главной страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Education website</title>
<meta name="description" content="Education website">
<meta name="keywords" content="education, learning, teaching">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
	<div id="logo"><img src="images/logo.png" width="94" height="69" alt=""></div>
    <div id="company_name">Learning<span>Center</span></div>
    <div id="find_form"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><input name="" type="text" value="Search"></td>
    <td><a href="#"><img src="images/spacer.gif" width="50" height="30"></a></td>
  </tr>
</table>   
    </div>
</div>
<div id="menu"></div>
<div id="header">
  <table width="610" border="0" cellpadding="0" cellspacing="0" class="smenu">
    <tr>
      <td id="smenu1"><a href="#">Our Mission Statement</a></td>
      <td id="smenu2"><a href="#">Registration Terms</a></td>
    </tr>
  </table>
</div>
<div id="contentwrap">
	<div id="sidebar">
    <h2>Latest news</h2>
    <div class="content">
    <p class="data">23.03.2011</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>   
    <p class="data">23.03.2011</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div>
    <div class="bottom"></div>
    </div>
	<div id="body_area">
	  <h1>Welcome to Our website !</h1>
      <p><a href="http://www.jdoqocy.com/14100zw41w3JNNPMKTLJLKOORKQM" target="_blank" onMouseOver="window.status='http://www.dreamtemplate.com';return true;" onMouseOut="window.status=' ';return true;">
<img src="http://www.tqlkg.com/pm118z15u-yJNNPMKTLJLKOORKQM" alt="DreamTemplate - Web Templates" border="0"/></a></p>
	  <p>Education is the process by which an individual is encouraged and enabled to fully develop his or her potential; it may also serve the purpose of equipping the individual with what is necessary to be a productive member of society. Through teaching and learning the individual acquires and develops knowledge and skills.</p>
      <p>The term education is often used to refer to formal education (see below). However, the word's broader meaning covers a range of experiences, from formal learning to the building of understanding and knowledge through day to day experiences. Ultimately, all that we experience serves as a form of education.</p>
      <p>It is widely accepted that the process of education is lifelong. Studies have shown that the child already in uetero is educated by the experiences it is exposed to.</p>
      <p><em>From Wikipedia, the free encyclopedia</em></p>
    </div>
</div>
<div id="footer">
	<div class="top"></div>
	<div id="bottom_menu"><a href="#">Home Page</a> |  <a href="#">About Us</a> |  <a href="#">Our Clients</a> |  <a href="#">Testimonials</a> |  <a href="#">Price List</a> |  <a href="#">Contact Details</a></div>
    <div id="bottom_addr">В© 2011 Company Name. All Rights Reserved<br>Designed by <a href="http://anvisionwebtemplates.com/" target="_blank">Anvision Web Templates</a> & <a href="http://webdesignfinders.net/" target="_blank">Webdesignfinders.net</a></div>
    <div class="bot"></div>
</div>
</div>
</body>
</html>

[Garfunkel]

Решение нашёл сам. Проблема была в том, что добавлялась ширина скроллбара к ширине страницы. Отсюда и прыжок влево. Решилось установкой

html {overflow-y:scroll;}

хотя так вертикальный скролл-бар становится виден всегда