Как убрать горизонтальную прокрутку?

[Slashik]

Помогите разрешить проблему...

Сейчас у меня в процессе верстка сайта в слоях. В таком виде:

центральная часть фиксированная - 979px, чтобы сайт влезал в 1024.

Если разрешение больше, что левая и права части (по 180px) будут видимы.

Но при проверке сайта при разрешении 1024 на 768 появилась горизонтальная линия:

Как решить? Всю голову сломал ((

Наглядный пример тут - http://tennisprofi.ru/

CSS

* {
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	background-image:url(pics/fon.jpg);
	background-repeat:repeat-x;
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	background-color:#deeff9;
}
a {
	color: blue;
	outline: none;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
p {
	margin: 0 0 18px
}
img {
	border: none;
}
input {
	vertical-align: middle;
}
#wrapper {
	width: 979px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

/* Left
—————————————————————————--*/
#left {
	background-image:url(pics/left.jpg);
	background-repeat:no-repeat;
	float:left;
	width:180px;
	height: 1652px;
	margin-left: -180px;
	position: relative;
}

/* Right
—————————————————————————--*/
#right {
	background-image:url(pics/right.jpg);
	background-repeat:no-repeat;
	float:right;
	width:180px;
	height: 1652px;
	margin-left: 979px;
	position:absolute;
}

/* Header
—————————————————————————--*/
#header {
	width:979px;
	height: 266px;
}

#header2 {
	height: 365px;
	background-image:url(pics/header2.jpg);
}

#menu_top {
	width:70%;
	height:50px;
	float:right;
	margin-top:300px;
	margin-right:160px;
}

#menu_top li {
	display:inline;
}

#menu_top a {
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
	text-transform: uppercase;
	color:#006;
	font-size: 14px;
	font-weight: bold;
	padding-left:20px;
}

#menu_top a:hover {
	text-decoration:none;
	color:#7a94b1;
}

/* Middle
—————————————————————————--*/
#middle {
	padding: 0 0 100px;
	height: 1%;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	float: left;
	width: 820px;
	padding-left:78px;
	overflow: hidden;
}
#content {
	height:1021px;
	background-image:url(pics/content.jpg);
	background-repeat:no-repeat;
}


/* Sidebar Left
—————————————————————————--*/
#sideLeft {
	float: left;
	margin-left: -898px;
	width: 78px;
	height:1021px;
}


/* Sidebar Right
—————————————————————————--*/
#sideRight {
	float: right;
	width: 81px;
	margin-left: -81px;
	height:1021px;
	position: relative;
}


/* Footer
—————————————————————————--*/
#footer {
	background-image:url(pics/bottom.jpg);
	background-repeat:no-repeat;
	width: 979px;
	margin: -100px auto 0;
	height: 198px;
}

#copyright {
	font-family:Verdana, Geneva, sans-serif;
	font-size: 12px;
	width:45%;
	height:50px;
	float:left;
	margin-top:140px;
	color:#9e8f8f;
}

#copyright a {
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
	color:#999999;
	font-size: 12px;
}

#copyright a:hover {
	text-decoration:none;
	color:#336699;
}

#counter {
	width:40px;
	height:50px;
	float:left;
	margin-top:140px;
	margin-left:30px;
}

#menu_bottom {
	width:45%;
	height:50px;
	float:right;
	margin-top:140px;
}

#menu_bottom li {
	display:inline;
}

#menu_bottom a {
	font-family:Verdana, Geneva, sans-serif;
	text-decoration:none;
	text-transform:capitalize;
	color:#999999;
	font-size: 11px;
	font-weight:bold;
	padding-left:5px;
}

#menu_bottom a:hover {
	text-decoration:none;
	color:#336699;
}

[psywalker]

А почему такие удивления? Ведь сам же сделал боковые колонки с отрицательными марджинами

[Slashik]

Так ведь по другому они у меня не вставали как надо...

Буду рад любой помощи..

[stars]

Тебе надо сделать края тянущимися то есть ширину не задавать строго. А картинки боковые с помощью бэкграунд-позишион встанут отлично...

[psywalker]

Тс, сделай один большой бг и повесь на общий контейнер.

[Slashik]

psywalker

Боюсь, что из-за большого бэкграунда, соответственно и вес будет не малым... Но попробую..

stars

Подскажи, какой код в id="left" и id="right" тогда написать? не могу сообразить.. ((

[psywalker]

psywalker

Боюсь, что из-за большого бэкграунда, соответственно и вес будет не малым... Но попробую..

Ну чтож поделать, считаю, что игра стоит свеч.

[Slashik]

psywalker

Не получилось... по крайней мере у меня...

При растягивании страницы фоновая картинка "гуляет сама по себе"...

то есть фон статичный, а вот центральные дивы получились "плавающими"вот скрин:

Или я не так сделал?

body {
	background-image:url(pics/fon_main.jpg);
	background-repeat:no-repeat;
	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
	background-color:#deeff9;
}

Edited June 19, 2010 by Slashik

[psywalker]

А я не наблюдаю, где в коде установлена позиция фона?

[Slashik]

psywalker

Решил остановиться на этом варианте.. вроде бы получилось..

[psywalker]

psywalker

Решил остановиться на этом варианте.. вроде бы получилось..

Отлично, так и нада)