Ширина CSS в целом может быть немного запутанной. Абсолютная ширина проста. Относительная ширина может привести к интересному поведению. В основном, процентная ширина относится к содержащему элементу. Если родительский элемент имеет абсолютную ширину, его легко решить. Часто это не так, поэтому вы можете получить сложные вычисления того, как браузер рассчитывает, сколько места ему нужно. Если все его дочерние элементы имеют процентную ширину, то он часто будет иметь меньшую ширину, чем обычно рассчитывает дизайнер.
Таким образом, когда вы видите margin-left: -100%, это в основном означает перемещение этого элемента за пределы его родительского элемента влево на полную ширину родительского элемента. Одним из следствий отрицательных полей (в частности) является то, что пространство, в которое они перемещаются, часто не учитывает их присутствие, и вы должны учитывать это при планировании макета.
Еще один хороший совет: если у вас такая ситуация:
<div id="outer">
Outer
<div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>
это действительно не сработает. Вернее, он будет работать на (iirc) Firefox, но не на IE (любой версии). Поэтому, если вы хотите сделать что-то подобное, вам нужно использовать содержащий элемент.
<div id="outer">
Outer
<div id="wrap">
<div id="inner">Inner</div>
</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>
и это будет гораздо более совместимо с браузером.
Вот полный пример, демонстрирующий отрицательные поля (проверено на FF, Chrome и IE8):
удалена мертвая ссылка ImageShack
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; }
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>