Centering an absolute div

[Xorifelse]

Edit: I've found a perfect CSS solution works fine on all browsers supporting CSS 2.0.

I've ran into a little snag, and let me state I already know how to center an absolute div but here is the issue.

#header{
	position: absolute;
	width: 400px;
	left: 50%;
	margin-left: -200px;
}

Using a negative margin will break the layout of the page when you resize your window smaller than 400px given by this example. It will slide out of the left and eventually the right side of the screen and the scrollbar does not give the functionality to get it back.
It will literally slide out of the page, which is something I do not want to happen.

I've seen techniques that work around this issue, but don't give me the functionality to build layout beneath the header. ( such as the float technique )

I've also seen some JavaScript workaround, but I'd rather not use JavaScript for structural layout, because it executes the code on actual resize which would use quite a lot unnecessary CPU.

Does anyone know a good way to solve this issue with just plain ol' CSS?
I'm not after browser compatibility cause I'm writing my page with HTML 5 and CSS 3 only, and plan to provide no support for browsers who do not follow this standard. It be a time waste, cause when I'm done with this website hopefully HTML 5 has been implemented even in IE.

 

[codemonkey]

I'm fairly sure there is no way to do this without JavaScript.