centering a div with css?

You can not use floats and expect content to center. I've used those CSS rules for years and IE has never given a problem except those before IE 6. I just checked those rules again in IE and they worked perfectly.

Floats removes the floated content from the normal document flow.

#windowWrapper {

width: 800px;

margin: 0 auto;

}

Centering:

Centering an element requires setting a width to the exact width of the content, using a proper document type and using the CSS property: margin: 0 auto; This is done in the CSS that styles the element. Example:

body {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

Example as a Class:

.selector_name {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

HTML for Class: <div class="selector_name">Content here</div>

Example as an ID:

#selector_name {

width: 90%;

height: 600px; /* optional */

margin: 0 auto;

background: #fff url(path to non-tiled image) no-repeat center scroll;

}

HTML for Class: <div id="selector_name">Content here</div>

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

Ron

I have no idea what you have got used to core it to this point, however as it is a box / wrap the fine technique to core it horizontally could be so as to add the next in your CSS: #box { margin: vehicle; } This will make certain that that div and the whole thing within shall be horizontally based in any browser. Try it out and notice. If that does not paintings, let us know your approach to this point so we will determine it out.

#windowWrapper {

width: 800px;

height: 100%:

position: center;

}

<div align="center">content here</div>