after margin-left/right auto child div margins is unresponsive

Question

I learned recently that I can center a div on the page (even when the window is resized) by doing margin-left:auto;margin-right:auto. This is great, and I can't believe I didn't know it. However, it seems to affect child divs so that they no longer accept margins normally.

http://jsfiddle.net/mLxx5/

Why is it that #header_text does not move down 15px from the top and left of #CBS_content_container. Instead it takes its margins using the window as its origin. Like, if I change #header_text{margin:150px;}, it will shift things around wildly.

Thanks for any help; I'm sure this is simple!

http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work — BoltClock, Aug 29 '12 at 00:04

score 1 · Answer 1 · answered Aug 29 '12 at 00:06

1

If you put overflow:hidden on your container div it will make the inner margins work better. It's got nothing to do with the auto, just how margins work.

You might also be better to use padding instead of margins on inner containers.

answered Aug 29 '12 at 00:06

zenkaty

1,538
9
11

Nah, the post that BoltClock referenced has all the answers. Thanks for you help though! – 1252748 Aug 29 '12 at 02:17

after margin-left/right auto child div margins is unresponsive

1 Answers1