Re: table-based sites

[Spunkmeyer]

Here’s a solution:

Code:

**NOTE: I INCLUDED 2 BOXES TO HELP YOU VISUALIZE THE DIFFERENCE IN MOVEMENT WHEN YOU ADD THE NEGATIVE MARGINS. Check out http://www.thedailyspunkmeyer.com/testingdirectory/test.html to see what I mean.

Basically, you have a box (#box) which in this example is 600px wide and 400px tall. Now, working from the top left corner, you then apply a "fixed" position to the element which makes the positioning of the element relevant to the browser window. You then apply the positioning: "top:50%; left:50%;" to move it down and right 50%.

Now, imagine that the box you’re creating has a dot right smack in the middle of it. If all was well, the browser would interpret our rules and move the box based on this middle dot. Unfortunately, the browser takes our rule and applies it to the perimeter of the box, marked by the border that I’ve included for this example. Well, if it does that, our box will be out of line horizontally and vertically by exactly half of the box’s dimensions; In this case, 300px too far right, and 200px too far down.

Ok. so let’s take that space back then by adding negative margins to the box with: "margin-top:-200px; margin-left: -300px; which then essentially moves the box left 300px and up 200px. The box should now be centered in the browser window.

** After I wrote this entire article, I thought it to be prudent to mention that Chris (the guy who writes the articles on this site) actually had a work around in an article that was pretty much exactly the same. Doheth!

***Also, you may want to read the posts after his article at http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ which illustrate the weaknesses of this particular work-around.