Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

You've also got to make a distinction between necessary and accidental complexity. That example would be better written as:

    body {
        width: 800px;
        margin: auto;
    }
(This also has the benefit that the left hand side of the body does not disappear off the side of the screen in small browser windows.)

There's a similar problem with the css in the article he links to - it is more complicated than it needs to be, which just confuses the subject. Anything is hard to learn if it is taught badly.



Negative margin as used in pavpanchekha's example centers the box also in browsers that do not support margin:auto. It's not complex if you know why it's done that way.


The latest browser which doesn't support margin:auto is IE5.5, and even there the text-align:center hack is a better option. There are cases where you might want to use negative margins, but for horizontally centering block level elements, it is at best outdated.


Unless you use a strict doctype. http://stever.ca/web-design/centering-a-div-in-ie8-using-mar... I don't think text-align: center on the parent box is significantly different in principle: confusing until you know why it's being done that why and roughly how it works.

Personally I like negative margin better than text-align: center since the style is only applied to the box being centered rather than the parent box and the box itself, but surely this is a matter of preference or the design of the particular page in question.


Yea, that IE8 bug is unfortunate.

Here's an example of text-align: center and margin: auto side-by-side: http://jsfiddle.net/wH5Pd/

Try making the window narrower so that the html pane in the bottom right gets horizontal scroll bars. (In the real world, there might be a two column layout, such that the textual content fits in the narrow window, but the full width of the content doesn't.)

Even when the window is narrow, all of the content in the top div can be accessed by scrolling horizontally. In bottom div, the left hand side of the content gets clipped because it is positioned to the left of the window, and scroll bars don't extend into negative offsets. If you're positioning an adornment which doesn't actually need to be visible, the negative margin trick might be OK. But for normal body content, margin: auto is the way to go.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: