Works in Mozilla 1.2 : NN6.Centering things is one of the most difficult aspects of CSS. If you don't want the borders to show you can colour them the same colour as the background etc. Just add a border to the element and all your tests will centre except of course for the last one with the negative margin.

Here's a much easier solution that I'd forgotton about. (I can't remember where I saw this but someone else deserves the credit.) The style is hidden from IE by using the child selector which ie doesn't understand.

It's basically turning the outer div into a table and the inner div into a table cell so you get it to behave like a table but with css. So something like this might work for newer browesrs.: Fortunately Mozilla recognises display-table-cell but IE doesn't. I don't whether this technique will be useful but relies on treating the div like a table. I'm interested in strict HTML4 solutions, otherwise I might as well just do it as a table!Ĭentre normal flow box, (relative) width in emĬentre normal flow box, (relative) width in exĬentre normal flow box, (relative) width in pixelsĬentre normal flow box, width as percentage of containing blockĬentre normal flow box, (absolute) width in cmĬentre relatively positioned box, (relative) width in pixelsĬentre absolutely positioned box, (relative) width in pixels Anyone know any more about this bug or a good workaround? Only using a width as a percentage of the containing blcok works.

This is a major flaw that makes doing a fixed pixel width layout unworkable. (Using Windows ME.) The left part of the box disappears off the left edge of the screen and is not visible and can't be scrolled to. In IE6 it is (mostly) ok, but in Netscape 7 and Opera 6 they both have the same problem. When centering a box the layout is fine unless you resize the browser window to less than the width of the box. I'm interested in a solution to this problem.

Top center div css on resize