Making a div slightly off-center

Question

Usually I would do this by either setting the margin to auto, using position:absolute, or via padding but unfortunately these will not work in this case. I need a div to be about 15 pixels off-center horizontally from the page. The tricky bit is it needs to scale correctly as the page widens. It seems to me that I would need to do this horizontal adjustment based on the center point, rather than the left hand side. How could I achieve this? Thanks.

Answer 1

Use a container div, which is centered, then its content you can give margin-left:npx - like so:

HTML

<div id="container">
    <span id="green">&nbsp;</span><br />
    <span id="blue">&nbsp;</span>
</div>

CSS

#container{width:100px; margin:auto auto; background-color:red;}
#container span{display:block; width:100%; }
#green{background-color:green; margin-left:10px;}
#blue{background-color:blue; margin-left:-10px;}

See the example coded up here - http://jsfiddle.net/Xpk8A/1/