PREAMBLE:
I was watching Leah Veru give a talk about new CSS3 (time index: 11:13) properties, like calc().
She pointed out that , assuming one wanted to create bands of content, using said property one could center content with ONE element. so instead of:
.one{background: orange;}
.two{background: pink;}
.center {width: 960px; margin:0 auto;}
<div class="one"><div class="center">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.</div></div>
<div class="two"><div class="center">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.</div></div>
one could have:
.one{background: orange;}
.two{background: pink;}
.one,.two {width: 960px; padding:0 calc(50%-480px);}
<div class="one">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.</div>
<div class="two">>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.</div>
However, support for this is limited even among modern browsers. She then wen on to mention a ‘hacky’ way of achieving the same effect with CSS2.1; which reminded me of an equal height technique just applied sideways. Basically the idea is to apply some ludicrous amount of horizontal padding, and offset it with an equal amount of negative horizontal margin.
.one{background: orange;}
.two{background: pink;}
.cc{padding:0 99999em;margin:0 -99999em;}
.shell{margin:0 auto;width: 960px;}
<div class="shell">
<div class="cc one"> centered content. i love you roni!. 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.</div>
<div class="cc two "> centered content. i love you roni!. 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.</div>
</div>
However , when I try to follow her instructions I get a scroll bar and 'off center ’ content.
Thus far , the only way I have been able to fix this is to add YET ANOTHER wrapper with overflow:hidden around div.shell .
of course, now we AT LEAST two extra non semantic elements and overflow:hidden involved, which doesnt seem as graceful as I had hoped. But maybe I missed something? I was hopping that, if I did, someone would poin