centering

[dan_t]

Hello,

I know probably a million people have asked this question, But

Everyone says not to use tables, but to use CSS instead. I can center a web page with no problems at all with tables.

But I can not for the life of me center a site with CSS.

I have tried putting the main page in a div tag named container and everything else inside(in div tags), but it just won't center. I've read up on it, googled it, tried zeroing out the margins. I just can't do it! What's the trick?

I sure could use the help.

Thanks

[peranha]

body {
text-align: center;
}

 

try that and see what you get.  if it doesnt work, can we see your css code?

[bronzemonkey]

Make sure you have a valid DOCTYPE as the first line in your document.

 

To center your container (or any other non-floated block element with a specified width) use:

 

#container {margin:0 auto;}

[DamienRoche]

Yeh, margin:0 auto; will do the trick, BUT you will find that if you float anything to the left within

that centered div, it will collapse the entire div. For that, you will need to use a stretcher.

 

<div id="container">

 

<div id="floatleftelement"></div>

 

 

<div class="stretcher"></div>

</div>

 

Then just use this class:

 

.stretcher{clear: both; width: 100%; height: 0; line-height: 0; font-size: 0;}

 

Hope that helps.

[SuperBlue]

However Often you require a footer, or some text at the bottom. Clear your floats on that, instead of adding obsolate elements, only resort to additional divs when they are actually needed.

[dont_be_hasty]

I would suggest using firefox and not internet explorer.

 

You could try this code in your css file:

 

html,body{

border:0px;

margin:0px;

width:100%;

height:100%;

}

 

.mainContainer{

width:800px;

min-height: auto;

height:auto;

margin:auto;

}

 

I have used this code and it displayed centered when opened in firefox.

 

You can also try this in your html file, if the above does not work:

 

<div class="mainContainer" align="center">

</div>