Ширина div увеличивается на padding

[Prokopov Nikolai]

Добрый день!

не могу понять почему ширина слоя увеличивается когда я хочу сделать отступ слева, т.е. использую padding-left?

код в станички:

<div id="page">
	<div id="header"><h1>header</h1>
	</div>

	<div id="content"><h1>content</h1>
	</div>

	<div id="footer_guarantor"><h1>footer guarantor</h1></div>

</div>

<div id="footer">
	<span>
		© 2003-2010 Евгений Володин<br />
		Техническая поддрежка <a href="http://www.prokopov-nikolai.ru" >Прокопов Николай</a>
	</span>
</div>

стили:

* { margin: 0; padding: 0; border: 0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; }
html { height:100% }
body { height:100%; min-height:100%; }


#page { height:100%; width:816px; margin:auto; min-height:100%; height:auto !important;  border:#666 solid 1px;  }


#footer_guarantor { height:40px; }
#footer { display:block; height:40px; width:816px; margin:auto; margin-top:-40px; padding-left:216px; border:#666 solid 1px; }

[psywalker]

Какого слоя?

[Searcher]

Если указана ширина, то слой будет занимать в ширину указанное значение + паддинги + бордер + марджин. Это стандарты такие.

Вы можете указать ширину только для page, остальные вложенные в него блоки без указания ширины будут занимать все доступное пространство в ширину с учетом указанных отступов.

[StormMan]

Я проблему решал, вставляя блок с паддингами в другой блок нужного размера с overflow:hidden Других способов решения не нашёл, так как старые версии IE блоки на padding не увеличивают и теряется кроссбраузерность.

Edited April 13, 2010 by StormMan