Jump to content


Photo
- - - - -

TUTORIAL: how to center a site using css


  • Please log in to reply
79 replies to this topic

#41 3dfan

3dfan

    Forum Newcomer

  • Members
  • Pip
  • 5 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 02 April 2009 - 01:04 PM

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


#42 hire202

hire202

    Forum Newcomer

  • Members
  • Pip
  • 14 posts
  • Gender:Male
  • Location:United Kingdom
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 03 May 2009 - 05:06 PM

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.


#43 Cloaca

Cloaca

    Forum Newcomer

  • Members
  • Pip
  • 2 posts
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 16 May 2009 - 07:19 AM

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


#44 Dizi

Dizi

    Queen of the Spammers

  • Members
  • PipPipPipPipPipPip
  • 5,731 posts
  • Gender:Female
  • Location:Newcastle, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 16 May 2009 - 10:02 AM

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 :)


#45 Tex0gen

Tex0gen

    Dedicated Member

  • Members
  • PipPip
  • 126 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 28 May 2009 - 02:49 AM

I do the following:

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

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


#46 ranmori

ranmori

    Forum Newcomer

  • Members
  • Pip
  • 1 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 29 May 2009 - 10:08 AM

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 :mellow:


#47 craigpettit

craigpettit

    Advanced Member

  • Members
  • PipPipPip
  • 475 posts
  • Gender:Male
  • Location:Weybridge, Surrey UK
  • Experience:Web Guru
  • Area of Expertise:Web Designer

Posted 02 June 2009 - 12:51 PM

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


#48 Wickham

Wickham

    Web Guru

  • Validating
  • PipPipPipPipPip
  • 3,343 posts
  • Gender:Male
  • Location:Salisbury UK
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 11 June 2009 - 08:17 AM

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.


#49 Crispy

Crispy

    Advanced Member

  • Members
  • PipPipPip
  • 388 posts
  • Gender:Male
  • Location:Wrexham, North Wales
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 12 July 2009 - 06:59 PM

This is really helpful, glad it's pinned.


#50 ali7766

ali7766

    Forum Newcomer

  • Members
  • Pip
  • 18 posts
  • Gender:Male
  • Location:North Yorkshire
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 12 July 2009 - 08:18 PM

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.


#51 Kellyeld85

Kellyeld85

    Forum Newcomer

  • Members
  • Pip
  • 22 posts
  • Gender:Female
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 07 August 2009 - 12:37 PM

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.


#52 Thomas Thomassen

Thomas Thomassen

    HTTP 503

  • Privileged
  • PipPipPipPipPip
  • 2,254 posts
  • Gender:Male
  • Location:Trondheim, Norway
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 07 August 2009 - 12:44 PM

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


#53 Sazzad

Sazzad

    UX Designer

  • Privileged
  • PipPipPipPip
  • 642 posts
  • Gender:Male
  • Location:New York, New York
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 16 August 2009 - 01:54 AM

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;
}


#54 ashley_90

ashley_90

    Advanced Member

  • Members
  • PipPipPip
  • 270 posts
  • Gender:Male
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 19 August 2009 - 11:01 AM

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


#55 swiped

swiped

    Dedicated Member

  • Members
  • PipPip
  • 242 posts
  • Location:London,Uk
  • Experience:Advanced
  • Area of Expertise:Coder

Posted 06 September 2009 - 01:57 PM

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 */
}


#56 Dizi

Dizi

    Queen of the Spammers

  • Members
  • PipPipPipPipPipPip
  • 5,731 posts
  • Gender:Female
  • Location:Newcastle, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 06 September 2009 - 02:55 PM

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/


#57 chyssa

chyssa

    Forum Newcomer

  • Members
  • Pip
  • 3 posts

Posted 27 October 2009 - 03:48 AM

thanks for sharing your codes...


#58 MyshMash

MyshMash

    Dedicated Member

  • Members
  • PipPip
  • 138 posts
  • Gender:Female
  • Location:UK
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 04 January 2010 - 12:10 AM

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;
}


#59 ChristopherDarling

ChristopherDarling

    Advanced Member

  • Members
  • PipPipPip
  • 343 posts
  • Gender:Male
  • Location:Bristol - UK
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 04 January 2010 - 01:05 AM

add to #menu ul overflow:hidden;


#60 lingal

lingal

    Forum Newcomer

  • Members
  • Pip
  • 3 posts
  • Gender:Female
  • Location:Asia
  • Experience:Beginner
  • Area of Expertise:Designer

Posted 30 April 2010 - 05:41 AM

Thanks! It is helpful! :clapping:


#61 GiffordBruno

GiffordBruno

    Forum Newcomer

  • Members
  • Pip
  • 7 posts
  • Gender:Male
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 07 June 2010 - 09:23 AM

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


#62 Jessica

Jessica

    Forum Newcomer

  • Members
  • Pip
  • 11 posts
  • Gender:Male
  • Experience:Beginner
  • Area of Expertise:I'm Learning

Posted 06 July 2010 - 01:37 PM

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


#63 Frost Tear

Frost Tear

    Expert

  • Privileged
  • PipPipPipPip
  • 713 posts
  • Gender:Male
  • Location:Bristol
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 06 July 2010 - 02:16 PM

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.


#64 EpicWebs

EpicWebs

    Advanced Member

  • Members
  • PipPipPip
  • 378 posts
  • Gender:Male
  • Location:UK
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 06 July 2010 - 03:09 PM

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.


#65 georgebower1

georgebower1

    Forum Newcomer

  • Members
  • Pip
  • 10 posts

Posted 21 August 2010 - 04:08 PM

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 !


#66 Synjyn

Synjyn

    Advanced Member

  • Members
  • PipPipPip
  • 255 posts
  • Gender:Male
  • Location:London
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 21 August 2010 - 05:58 PM

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


#67 kingy da killa

kingy da killa

    Free man on the land

  • Privileged
  • PipPipPipPipPip
  • 2,144 posts
  • Gender:Male
  • Location:London SW
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 01 December 2010 - 05:28 PM

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


#68 Sazzad

Sazzad

    UX Designer

  • Privileged
  • PipPipPipPip
  • 642 posts
  • Gender:Male
  • Location:New York, New York
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 03 June 2011 - 03:40 PM

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


#69 anjie

anjie

    Forum Newcomer

  • Members
  • Pip
  • 11 posts
  • Gender:Female
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 14 June 2011 - 02:28 PM

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 :)


#70 anjie

anjie

    Forum Newcomer

  • Members
  • Pip
  • 11 posts
  • Gender:Female
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 14 June 2011 - 02:32 PM

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 :)


#71 kingy da killa

kingy da killa

    Free man on the land

  • Privileged
  • PipPipPipPipPip
  • 2,144 posts
  • Gender:Male
  • Location:London SW
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 14 June 2011 - 02:45 PM

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 :)


#72 Adam Roberts

Adam Roberts

    Forum Newcomer

  • Members
  • Pip
  • 33 posts

Posted 23 November 2011 - 12:16 PM

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;
}

Edited by Adam Roberts, 23 November 2011 - 12:17 PM.


#73 Dizi

Dizi

    Queen of the Spammers

  • Members
  • PipPipPipPipPipPip
  • 5,731 posts
  • Gender:Female
  • Location:Newcastle, UK
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 26 November 2011 - 08:24 AM

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 :pp

Edited by Dizi, 26 November 2011 - 08:25 AM.


#74 bekyarov

bekyarov

    Forum Newcomer

  • Members
  • Pip
  • 34 posts
  • Gender:Male
  • Location:Bulgaria
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 23 December 2011 - 12:31 PM

This would be useful for the CSS beginners, good one :)


#75 scriptsconnect

scriptsconnect

    Forum Newcomer

  • Members
  • Pip
  • 28 posts

Posted 27 May 2012 - 03:25 PM

All you have to keep in mind is you must have a fixed width.

For example, give your primary container a fixed width:

div#wrapper { width: 1000px; }

However, after applying the fixed width, it is still not centered. Now add the following to what we already made:

div#wrapper { width: 1000px; margin: 0 auto; }

margin: 0 auto
is the same thing as
margin: 0 auto 0 auto
, or,
margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;


#76 RehmanBaigMirza

RehmanBaigMirza

    Forum Newcomer

  • Members
  • Pip
  • 3 posts

Posted 16 June 2013 - 01:22 PM

I think we should also declare the doc type in your html document when using margin: 0 auto; Internet explorer will not accept without giving the doc type and hence the content floats to the left.

Eg:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd">



#77 vdsmigs

vdsmigs

    Forum Newcomer

  • Members
  • Pip
  • 44 posts
  • Gender:Male
  • Location:Ontario Canada
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 29 October 2014 - 07:42 AM

Main Block elements can be center aligned by setting the left and right margins to "auto".

set the left and right margins to auto specify that they be supposed to divide the available margin evenly. The outcome is a centered Block element:

main_div{

    margin-left: auto;

    margin-right: auto;

    width: 70%;

    background-color: #b0e0e6;

}



#78 davep

davep

    Privileged

  • Privileged
  • PipPipPipPip
  • 687 posts
  • Gender:Male
  • Location:Kokkola, Finland
  • Experience:Intermediate
  • Area of Expertise:Web Designer

Posted 30 October 2014 - 01:19 PM

Main Block elements can be center aligned by setting the left and right margins to "auto".

set the left and right margins to auto specify that they be supposed to divide the available margin evenly. The outcome is a centered Block element:

main_div{

    margin-left: auto;

    margin-right: auto;

    width: 70%;

    background-color: #b0e0e6;

}

underscores are invalid for class names in css



#79 Dr.Iggy

Dr.Iggy

    Forum Newcomer

  • Members
  • Pip
  • 27 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted 23 July 2015 - 10:08 AM

For elements which has

position: relative;

to center them they must have defined width, float: none; and margin: 0 auto;
 
For elements which has

position: absolute;

to center them set left: 0; right: 0; and margin: 0 auto; and define its width.


Edited by Dr.Iggy, 23 July 2015 - 10:10 AM.


#80 kshows

kshows

    Forum Newcomer

  • Members
  • Pip
  • 1 posts

Posted 05 October 2017 - 09:49 AM

Hi I am new to the designing and am as thick as f.... when it comes to coding could you please do an in depth explanation of exactly how to do it. i want to centralized Auto my video see website






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users