Using CSS, how do I move a DIV to the left of the centre position?

Question

A fairly standard way to horizontally centre a DIV is to set the left and right margins to auto.

However, I have a DIV that I want to be mostly horizontally centred, but I want to nudge it a little toward the left.

I tried setting the margins like so:

margin: 100px 60% 24px 40%;

... and also like this:

margin: 100px 40% 24px 60%;

... but both resulted in the DIV being positioned further to the right.

I tried adding padding to the DIV, but that also only moves it to the right.

In short, it seems no matter what I do, the DIV moves to the right, not to the left as desired.

How do I nudge a DIV a little to the left of centre?

Answer 1

A different way of handling this is making a parent wrapper div. Where you set that to auto so that parent is centered, but the child div is then starts at the center but moves to the right. See fiddle http://jsfiddle.net/4H26W/1/

html

<div id="red">
    <div id="blue">Some text</div>
</div>

css

#red {
    width: 1px; /* you could actually just change it to 0px */
    margin: 100px auto;
    background: red;
}
#blue {
    width: 200px;
    background: blue;
}

Then if you wanted to further optimize the position of the child div, you could just add some left styles to it

position: relative; /* has to be position relative for left to work, or you could just do margin-left: -50px; too */
left: -50px;

http://jsfiddle.net/4H26W/2/