[3dfan]

Thanx Dizi for very cool explanation, this was uneasy but I managed to do this! Thanx a lot!

[hire202]

ok, Dizi centering site is very simple BUT, what if you wanted the height of the element change as content starts to exceed the height of that element.

it's wierd how the browser minds work but all you have to do is add a float to the element... well no, the centering won't work then. So you have to add a div inside that, the same width maybe some padding (remember less width when adding padding) then add a float: left to it, here is an example:

THE CSS

#wrapper { width: 900px; margin: 0px auto; } /* Centers Content */
#container { width: 880px; padding: 0px 10px; float: left; background: #FFF; } /* Creates an AutoHeight */

THE HTML

<div id="wrapper">
<div id="container">
<!-- All Content Goes Inside Here -->
</div>
</div>

Floating is very tricky, but can be handy in cases like this.
Something to add, you don't need this:

body { text-align: center; }

This only centers text, never centers divs. Hope this was a handy extra to Dizi's technique.

[Cloaca]

THANK YOU!!! I've been looking for ages how to do this, and this is the first thing I've found that actually works!

[Dizi]

hire202, on May 3 2009, 18:06, said:

body { text-align: center; }

This only centers text, never centers divs. Hope this was a handy extra to Dizi's technique.

Actually as I explained, that is needed for older browsers that are still used. As some older browsers will not centre a container with margin 0 auto, so the text-align fixes this as it is a strange quirk where these browsers will see text-align: center and will centre everything....so if you want the site to centre across as many browsers as possible, then keep it in

[Tex0gen]

I do the following:

* {
			 margin: 0 auto;	  - New Browsers mostly [Firefox yumm]
			 padding: 0;
}

body {
			text-align: center;	- For Older Browsers [IE yuck]
}

[ranmori]

simulation credit auto
Thank you for providing us with the example code, and a brief explanation of the problem. However, we do not fully understand the problem you are experiencing

[craigpettit]

i generally just create a container and make the margin auto. seems to work fine?

[Wickham]

Summarising how to center a page in the viewing window (viewport):-

The first post on this topic said:-
#wrapper {
margin: 0 auto;
width: xxxx; /* Replace the xxxx with the the width of your site (eg 800px)*/
text-align:left;
}

This is fine unless any elements inside the #wrapper are position: absolute as position: absolute elements are taken out of the normal flow and will take their top and left positions from the top left corner of the immediate parent, normally the body, so they remain fixed to the top left corner of the window.

If you add position: relative to #wrapper, any position: absolute elements inside will then take top and left positions from the top left corner of the #wrapper so that if the #wrapper moves to center in any window resolution, the position: absolute elements will move with it, retaining their positions inside. A parent element without position: relative does not have this effect on position: absolute elements. So a safer code is:-

#wrapper {
margin: 0 auto; position: relative;
width: xxxx; /* Replace the xxxx with the the width of your site (eg 770px)*/
text-align:left;
}

I would suggest 770px instead of 800px as an example so that there is space for a vertical scrollbar in older screen resolutions of 800*600px and it won't create a horizontal scrollbar.

The other main method of centering a page is:-

#wrapper {
position: absolute; left: 50%; width: 770px; margin-left: -385px;
}

where the margin-left is always negative half the div width. This works well for small centralised divs like a small splash photo link but is unreliable for divs or images with a large width. It works well centering at higher window resolutions but at lower resolutions which are less wide than the div the negative margin-left takes the left edge out to the left beyond the screen edge. There is no way to scroll to reach the content beyond the left side.

[Crispy]

This is really helpful, glad it's pinned.

[ali7766]

I create a container and use,

position:relative;
margin-left:auto;
margin-right:auto;

Seems to work fine for me and doesn't seem to be any problems with different browsers.

[Kellyeld85]

Hi I usually just add this to the wrapper or container div:

</head>

<body>
<div align="center" id="wrapper">
//everything inside the wrapper
</div>


I did try it the css way (auto, 0) but in some browsers it didn't center, so I looked at the source code on other websites and found this worked best for me.

[Thomas Thomassen]

align="center" is depreciated HTML attribute. HTML should not include any layout elements/properties. CSS should take care of that.

[Sazzad]

Sorry for bumping this topic, but you can also achieve this by just giving the body tag a css command. One draw back is that everything will be auto aligned.

body {
	width: xxxx;
	margin:0px auto;
	position: relative;
}

[ashley_90]

Thanks for this, makes things so much neater when coding!

[swiped]

Heres my 10pence worth

horizontally and vertically center a DIV


.wrapper_div {
position: absolute;
width:500px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -250px; /* should be half the width px */
margin-top: -100px; /* should be half the height px */
}

[Dizi]

Problem with that one is if the browser window is too small for the content the content goes off the top of the screen.

I wrote a short tutorial on how to vertically center a site without this happening it can be found here:

http://webdesignpond...-center-a-site/

[chyssa]

thanks for sharing your codes...

[MyshMash]

Can you tell me what's wrong with this code?
I'm trying to centre my menu but when I do float: left it get's rid of my bg color...:

#wrapper {
	background-color: #83e36f;
	width: 750px;
	margin: 0 auto;
	text-align:left;
}


#menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu li {
	float: left;
	margin: 0 0.15em;
}

[ChristopherDarling]

add to #menu ul overflow:hidden;

[lingal]

Thanks! It is helpful!

[GiffordBruno]

The best way to center the content using CSS is using of wrapper and the div portion,thanks.

[Jessica]

Dizi, on 13 November 2007 - 07:54 PM, said:

This won't work if you want other parts of your site to span across the whole page.

For example you want your header to span the full width of a page and then the rest of your content to be central. As applying a width to the body element will mean that everything on the page will only span that width you have set. So setting your header width to 100% when you have set the body width to maybe 700px the header will only span 100% of the that 700px width and not 100% of the page.


So only use this technique if you want the entire site to be a fixed width

I've not managed to read through all of the replies, but this is similar to what I'm attempting to achieve. The header spanning the full width of the screen, and the footer, each with their own individual background colors, and the content being centered. But as you said, the mentioned technique here only works with an entire site being a fixed width.

Would you be able to expand on what the basics are of achieving the above?

Regards,
Jessica

[Frost Tear]

Jessica, on 06 July 2010 - 01:37 PM, said:

I've not managed to read through all of the replies, but this is similar to what I'm attempting to achieve. The header spanning the full width of the screen, and the footer, each with their own individual background colors, and the content being centered. But as you said, the mentioned technique here only works with an entire site being a fixed width.

Would you be able to expand on what the basics are of achieving the above?

Regards,
Jessica

Have the header and footer outside the 'wrapper' div, then repeat the header and footer horizontally.

[EpicWebs]

MyshMash, on 04 January 2010 - 12:10 AM, said:

Can you tell me what's wrong with this code?
I'm trying to centre my menu but when I do float: left it get's rid of my bg color...:

#wrapper {
	background-color: #83e36f;
	width: 750px;
	margin: 0 auto;
	text-align:left;
}


#menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#menu li {
	float: left;
	margin: 0 0.15em;
}

Nevermind - Christopher answered already.

[georgebower1]

could someone tell me why my site wont centre, i have tried the wrapper technique

you should be able to view my html and css on my website

my site is www.fifagamingleague.net/website

i am usign that extension for the moment instead of wiping away my old site

if it helps this is what i designed my site to look like

http://img840.images...lsesitelook.jpg

if there is anyone that could i would be very very appreciative.

thanks a lot !

[Synjyn]

georgebower1, on 21 August 2010 - 04:08 PM, said:

could someone tell me why my site wont centre, i have tried the wrapper technique

you should be able to view my html and css on my website

my site is www.fifagamingleague.net/website

i am usign that extension for the moment instead of wiping away my old site

if it helps this is what i designed my site to look like

http://img840.images...lsesitelook.jpg

if there is anyone that could i would be very very appreciative.

thanks a lot !

To center a html container just set its width value and then margin-left:auto / margin-right:auto. It will only center if you set its width.

#mainone {margin-left:auto;margin-right:auto;text-align:left;width:950px;}

and get rid of the margin-left:40px from all of your other containers like div#logo and #navbar-top

[kingy da killa]

<div id="wrapper" style="margin-left:auto;margin-right:auto;width:800px;>[website goes here]</div>
my method

[Sazzad]

I found this tutorial very helpful for those that wish to center their entire div tag: http://www.sohtanaka...-alignment-css/

[anjie]

For beginners in css I always recommend them to start with a global reset. I use Eric Meyer's reset: http://meyerweb.com/...ools/css/reset/

This is the way I do it.

<div id="main-wrapper">
<div id="header"><!--declared height--></div>
<div id="body-container"></div>
<div id="footer"><!--declared height--></div>
</div>

ex:
#main-wrapper{ margin:0 auto; width:967px;}

For the header, body-container and footer. same width as the #main-wrapper. I use float:left; instead of margin:0 auto; in this three containers. Opps. with the exception of the main-wrapper of-coarse.

I suggest you use Firebug Add-ons for Firefox in studying the structure of other sites...

There are many ways. This is just the way I do it

[anjie]

Opps. Some designers may argue that it's not ideal to use a global reset. I guess it depends on the designer. A reset makes my life easier

[kingy da killa]

anjie, on 14 June 2011 - 02:32 PM, said:

Opps. Some designers may argue that it's not ideal to use a global reset. I guess it depends on the designer. A reset makes my life easier

and mine

[Adam Roberts]

You don't need to use text-align: center; on the body. Nor text-align left on the wrapper. The code in the first post is trying to center main div twice.

Here's how to do it successfully..

HTML:

<body>
   <div id="wrapper">
      <!-- Header / Content / Sidebar / Footer html here -->
   </div>
</body>

CSS:

body {
   background: #000;
}
#wrapper {
   width: 960px; /* Change to the width of your design */
   margin: 0 auto;
   background: #fff;
}

This post has been edited by Adam Roberts: 23 November 2011 - 12:17 PM

[Dizi]

Adam Roberts, on 23 November 2011 - 12:16 PM, said:

You don't need to use text-align: center; on the body. Nor text-align left on the wrapper. The code in the first post is trying to center main div twice.

The Original post was written in 2007 when some popular browsers at the time (IE6 for example) required you to use text-align as they ignored margin:0 auto and other browsers ignored text-align and required margin:0 auto. So at the time of writing you did need to do both

This post has been edited by Dizi: 26 November 2011 - 08:25 AM

[bekyarov]

This would be useful for the CSS beginners, good one