[CSS]ページの途中から親の指定を無視して、横幅100％で背景色を変えたい

Question

既存のPCサイトをレスポンシブ化する際に、詰まってしまいました。
もしよろしければ、お知恵をお貸しください。

現在、下記のような作りで親要素であるwrapperに余白と背景色を指定しているのですが、

<div id="wrapper"> <div id="container"> <div id="maincolumn"> コンテンツコンテンツコンテンツコンテンツ </div> </div> </div>

#wrapper{
width:100%
background:#ddd
padding:20px
}

この指定を無視して、ページの途中からmaincolumnを横幅100％にする方法・記述はございませんでしょうか？

Answer 1

親要素の左右のpaddingをマイナスmarginで相殺しましょう。

この例なら
.maincolumn { margin:0 -20px; }
で解決できると思います。