Left Margin Of Margin: Auto-ed Elements = To Padding Left Of 100%-width Overflow Item

Let me demonstrate the problem with the following HTML:

&

Solution 1:

calc() method

This can be done with the (experimental) calc property:

divarticle {
    margin-left: calc(50% - 300px/2);
}

Demo

Here you'd have to enter the width of the <header> (in this case 300px) and it will automatically determine what 50% - (width) / 2 is. This won't automatically change if you change the style for the <header> though, and it is not supported in too many browsers.

margin-left and left method

This is a method that would work in every modern browser: defining a left positioning, and then a negative left margin:

divarticle {
    position:relative;
    left: 50%;
    margin-left: -150px;
}

Demo

This first moves the element to 50% width on the page, and then moves it 150px to the left via its negative margin. You will have to enter the width of the <header>, like the calc() method, but here you'll have to divide it by 2 yourself (shouldn't be too hard :P)