幅が可変な親要素の100%以上に幅を広げる

レスポンシブサイトを作るときにたまにあるのですが、幅が可変な要素の左右にpaddingで余白を取り、その子要素で親要素の左右のpaddingを含めた100%指定にしたい場合の方法を試してみます。

サンプルコード

HTML

<div id="page">
	<div>
		#pageには背景色指定と、<br />marginとpaddingで左右に余白をとっています。
	</div>
	<div class="sample1">
		#page内で幅100%の場合のサンプルです。
	</div>
	<div class="sample2">
		#page内で幅100%<br />+左右指定したサイズだけ引き伸ばした場合のサンプルです。
	</div>
</div>

CSS

#page {
	margin: 0 10px;
	padding: 10px;
	background: #ecf0f1;
}
.sample1 {
	background: #3498DB;
}
.sample2 {
	margin-left: -10px;
	margin-right: -10px;
	background: #2ECC71;
}

対象の子要素にネガティブマージンを指定することで、指定しただけ左右に引き延ばされるようです。
幅が可変な親要素の100%以上に幅を広げるデモページ