при width 100% дива появляется горизонтальная полоса прокрутки

stalker_2000 · July 4, 2011

Приветсвую! Есть такой код:

html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>

<div id="wrapper">
  <div id="header">header</div><!-- END header -->
  <div id="navbar">navigation</div><!-- END navbar -->
  <div id="content">content</div><!-- END content -->
</div><!-- END wrapper -->
<div id="footer">footer</div><!-- END footer -->

</body>
</html>

css


* { padding: 0; margin: 0; }

a img { border: none; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  background: url(img/bg.jpg) repeat;
  color: #000; }

#wrapper {
  margin: 0 auto; }
#header {
  height: 100px;
  background: #ABBEBE; }
#navbar {
  height: 100px;
  background: #BABABA; }
#content {
  padding: 10px;
  width: 980px;
  background: #F2F2E6; }
#footer {
  width: 100%;
  [b][u]padding: 10px;[/u][/b]
  background: #ABBEBE; }

#wrapper, #header, #navbar { width: 1000px; }

Объясните, пожалуйста, почему при добавлении выделенной строчки в секцию footer-а появляется горизонтальная полоса прокрутки? И как с этим бороться?

sigma77 · July 4, 2011

On 7/4/2011 at 7:44 AM, stalker_2000 said:
Объясните, пожалуйста, почему при добавлении выделенной строчки в секцию footer-а появляется горизонтальная полоса прокрутки?

http://htmlbook.ru/blog/shirina-bloka

и в общем: блочная модель

On 7/4/2011 at 7:44 AM, stalker_2000 said:
И как с этим бороться?

В данном случае убрать у футера width: 100%

stalker_2000 · July 4, 2011

спасибо, разобрался

Sign In

при width 100% дива появляется горизонтальная полоса прокрутки

Question

stalker_2000

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

stalker_2000

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information