How do I get Div to Center in all browsers?

HTML & CSS
1

Hello everyone,
I have been trying to get my <div> tags to center in all the browswers in the different size monitors. After doing some research I am almost there. But I’m not there yet. Can anyone tell me what I am doing wrong? I put the margin numbers in as guess work and it looks like it’s centering however, I know it’s not. Thanks for your help.
PS: You guys were right. Divs are so much better than tables!

@charset "utf-8";
/* CSS Document */

body {
    background-color:#0e5ebe;
	
	
	/*margin-left: 250px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;*/
}

#theShell{
	width:900px;
	border:1px solid #ffffff;
	position:absolute;
	top:-4px;
	left:20%;
margin-left:0px;
}

#shellTwo{
	width:900px;
	border:none;
	position:absolute;
	top:229px;
	left:20%;
margin-left:0px;
}
2

PS: You guys were right. Divs are so much better than tables!

Hi,
It sounds like your new to tableless layouts. You need to realize that absolute positioned elements are completely removed from the page flow and other in-flow elements are blind to them. One of the worst things someone can do when coming from tables is to start building pages with AP.

Absolute positioning should really only be used for small portions of the page that NEED to be removed from the page flow.

Get rid of the AP wrappers or your next question will be “why won’t my footer go to the bottom”. :slight_smile:

3

To center an absolutely positioned element, you do the following:

  1. Give the item a fixed width (say 200px) to scale against
  2. Set position absolute and the top position you want
  3. Set the left position to 50% (half the pages width)
  4. Set a negative margin of half the width (say -100px)

It should then push the box 50% across the screen and the half negative margin will pull it back to the midpoint. :slight_smile:

4

Must they be absolute positioned? If not, put this on the div (with fixed width):

margin:0px auto 0px auto; (that will center it)