проблема с анкорами

tipoc · September 16, 2010

Здравствуйте!

Есть трехколоночный макет фиксированной ширины (который корректно работает под всеми браузерами).

CSS (см. секцию LAYOUT в нем):

/********** TOP-LEVEL ELEMENTS **********/
html, body {
  margin: 0;
  padding: 0;
  text-align: center;   /* for centering layout */
}

/********** FONT **********/
body {
  font: 76% arial, sans-serif;
}

/********** COLORS **********/
/* blue - #99f, orange - #fc3, black - #666, gray - #ccc */
body {
  background-color: #ccc;
}
.body {
  background-color: #fff;
}
.header {
  background-color: #666;
  color: #FFF;
}
.left {
  background-color: #99f;
}
.right {
  background-color: #99f;
}
.footer {
  background-color: #666;
  color: #FFF;
}

/********** MAIN BLOCKS **********/
.header {
  text-align: center;
}
.header h1 {
  height: 35px;
  margin: 0;
}
.footer {
  text-align: center;
  padding: 5px;
}
.left_menu {
  padding-top: 10px;
  padding-left: 20px;
}
.right_menu {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
/********** LAYOUT **********/
.container {
  width: 980px;
  min-height: 500px;
  margin: 0 auto;
  text-align: left; /* returning to default text-align for text */
}
    .main {
      float: right;
      width: 100%;
    }
      .center {
        float: left;
        margin-right: -200px;
        width: 100%;
      }
        .content {
          padding: 10px 210px;
        }
      .right {
        float: right;
        width: 199px;
      }
    .left {
      float: right;
      margin-right: -200px;
      width: 199px;
    }
  .footer {
    clear: both;
  }
.body, .center, .right, .left {
  overflow: hidden;
  zoom: 1;
}
.main, .right, .left {
  margin-bottom: -32767px;
  padding-bottom: 32767px;
}

/********** BORDERS **********/
.left {
  border-right: 1px solid black;
}
.header {
  border-bottom: 1px solid black;
}
.right {
  border-left: 1px solid black;
}
.footer {
  border-top: 1px solid black;
}

/********** OTHER **********/
a img {
  border: none; /* Убираем границу */
}
.feedback_quote {
  background-color: #E8EFFF; 
  border: 1px solid black; 
  padding: 10px
}
.feedback_span {
  font-style: italic;
}

HTML:

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="css/main.css"/>
  <title>FAQ</title>
</head>

<body>
<div class="container">
  <div class="header">
	This is header!
  </div>
  <div class="body">
    <div class="main">
      <div class="center">
        <div class="content">
   			<h2>Test FAQ</h2>
			<ul>
			<li><a href="#faq1">Вопрос 1</a><br/><br/></li>
			<li><a href="#faq2">Вопрос 2</a><br/><br/></li>
			<li><a href="#faq3">Вопрос 3</a><br/><br/></li>
			<li><a href="#faq4">Вопрос 4</a><br/><br/></li>
			<li><a href="#faq5">Вопрос 5</a></li>
			</ul>

			<a name="faq1"><strong>Вопрос 1</strong></a><br/>
			Ответ 1.<hr/>
			<a name="faq2"><strong>Вопрос 2</strong></a><br/>
			Ответ 2.<hr/>
			<a name="faq3"><strong>Вопрос 3</strong></a><br/>
			Ответ 3.<hr/>
			<a name="faq4"><strong>Вопрос 4</strong></a><br/>
			Ответ 4.<hr/>
			<a name="faq5"><strong>Вопрос 5</strong></a><br/>
			Ответ 5.<hr/>
        </div>
      </div>
      <div class="right">
        <div class="right_menu">
  			This is right_menu!
		</div>
      </div>
    </div>
    <div class="left">
      <div class="left_menu">
  		This is left_menu!
      </div>
    </div>
  </div>
  <div class="footer">
    This is footer!
  </div>
</div>
</body>
</html>

Проблема в том, что при переходе по какой-либо ссылке (Вопрос 1, Вопрос 2 и т.д.) верхняя часть страницы обрезается, а не скроллится. Все дело в overflow: hidden (см. CSS код). Но без него layout будет некорректным.

Подскажите как решить проблему с анкорами, при этом не ломая сам layout?