テスト3

pre の背景をウィンドウ幅いっぱいに広げる見本3。なので、body 直下の要素で全体(でなくてもいいんだがとにかく幅指定してる要素の外側)をラップして width: 100%; overflow-x: hidden; とするより、今のところ方法がない気がしている。

body {
	margin: 0;
	padding: 0;
	width: 100%;
}
#container {
	width: 100%;
	overflow-x: hidden;
}
#content {
	margin: 0 auto;
	width: 720px;
}
pre {
	margin: 0 -10000px;
	padding: 0 10000px;
	border-top: 3px #aaa solid;
	border-bottom: 3px #aaa solid;
	background-color: #ddd;
	color: #666;
}

これでようやく完全に横スクロールを抑止出来る。でもこうなってくると今度はウィンドウ幅がコンテンツ幅より狭かった場合でも横スクロールが出来なくなるので、これはこれで問題ではあるのだけど…

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.