CSS Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 300,401 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,579 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Align your page to the center of the browser window

Align your page to the center of the browser window, with css

Options

Rating

xfodder

29 Oct, 2006 - 11:25 PM

Post #1

Before reading this tutorial, please read the CSS beginners tutorial

You may have seen sites where the page content will always stay in the center of the browser window no matter the size (www.csnation.net for example).

This is very easily achieved with css here is how:

Firstly create a div in your html code and give it an id, something useful like wrapper (since we want to incapsulate your content inside this div).

CODE

<html>
<head>

    <title>untitled</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />

</head>

<body>

           <div id="wrapper"></div>

</body>
</html>

Next define a style in a css document for the wrapper div, make sure you set the margin to 0 auto , (the width can be of your choice)

CODE

#wrapper {
margin: 0 auto;
width: 700px;
}

Now create a new div INSIDE the wrapper div, name it something useful like content

CODE

<html>
<head>

    <title>untitled</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />

</head>

<body>

           <div id="wrapper">

                 <div id="content"> Content Here </div>

           </div>

</body>
</html>

Next define a new style for the content div in your css document, (the width can be of your choice)

CODE

#wrapper {
    margin: 0 auto;
    width: 700px;
}
#content {
    width: 100%;
}

Now make sure all your content (including other div's) goes inside the content div, your content will now always be in the middle of the browser window !

This post has been edited by xfodder: 30 Oct, 2006 - 10:10 PM

Register to Make This Ad Go Away!

Tuzoid

12 Nov, 2006 - 02:41 AM

Post #2

I'm not sure if these are the same, but I've always used:
margin-left:auto;
margin-right:auto;

May just be me though

xfodder

2 Jan, 2007 - 09:12 AM

Post #3

QUOTE(Tuzoid @ 12 Nov, 2006 - 07:41 PM)

I'm not sure if these are the same, but I've always used:
margin-left:auto;
margin-right:auto;

May just be me though

well actually it is the same but using 'margin: 0 auto' is just a quicker way to set the left and right margins to auto

Niemi

14 Mar, 2007 - 01:38 PM

Post #4

Quite right, but it only centers the DIV horizontally, not vertically.

xfodder

30 Mar, 2007 - 07:28 AM

Post #5

QUOTE(Niemi @ 15 Mar, 2007 - 07:38 AM)

Quite right, but it only centers the DIV horizontally, not vertically.

thats true, im unsure of how to center DIV's vertically ... still finding my feet

AndyBo

2 May, 2007 - 08:03 AM

Post #6

QUOTE(xfodder @ 30 Mar, 2007 - 08:28 AM)

QUOTE(Niemi @ 15 Mar, 2007 - 07:38 AM)

Quite right, but it only centers the DIV horizontally, not vertically.

thats true, im unsure of how to center DIV's vertically ... still finding my feet

Also for some strange reason when applied a border to outer wrapper in IE is ok when wrapper hight set to "blank", in Mozilla its not showing around that inner cell. When I add some numbers to hight it does show the border around whole thing in Mozilla.
Any suggestions?

This post has been edited by AndyBo: 2 May, 2007 - 08:06 AM

WhiteFang

21 Apr, 2008 - 06:34 AM

Post #7

extremely helpful mate - my blog now has no flaws (i hope)

jbharding

11 May, 2008 - 09:10 AM

Post #8

All well and good, and it works! Thanks! My webpages are centered.

Here is the end result: IDKPress Website

BUT I want to add color, or design to the left and right margins. I believe this is possible with an outer wrapper. The problem is, how does the outer wrapper get the screen size?

This post has been edited by jbharding: 11 May, 2008 - 09:11 AM

capty99

11 May, 2008 - 09:28 AM

Post #9

jb , you set the outer wrapper to 100% if you want to do it like that.

or you can just use a backgroundimage...

but if you really want content out there you should look at a three-column layout with the center being a static size and the outsides being flexible.

jbharding

11 May, 2008 - 09:37 AM

Post #10

QUOTE(capty99 @ 11 May, 2008 - 10:28 AM)

Thanks! I get it - extremely helpful!!!

Phantom

14 May, 2008 - 01:36 AM

Post #11

Doesn't seem to work in IE 7

jbharding

15 May, 2008 - 10:01 AM

Post #12

QUOTE(jbharding @ 11 May, 2008 - 10:37 AM)

QUOTE(capty99 @ 11 May, 2008 - 10:28 AM)

Thanks! I get it - extremely helpful!!!

I am currently using Adobe Golive, but am considering a switch to Dreamweaver, which handles CSS well, or maybe Joomla. Which would you pick?
Thanks

nickmorss

24 Jul, 2008 - 03:01 AM

Post #13

I have developed a more elegant solution. it only requires one Div and is fully browser compatible. Check it out here http://pistachiomonkey.com/blog/archives/133

seanmac

29 Jul, 2008 - 05:46 PM

Post #14

QUOTE(nickmorss @ 24 Jul, 2008 - 04:01 AM)

I have developed a more elegant solution. it only requires one Div and is fully browser compatible. Check it out here <a href="http://pistachiomonkey.com/blog/archives/133" target="_blank">http://pistachiomonkey.com/blog/archives/133</a>

Hi,
I went to look at your link:
"http://pistachiomonkey.com/blog/archives/133"
but got a 404 page missing... Any chance I can still find this info somewhere?
Cheers
Sean

php_newb

29 Oct, 2008 - 08:30 PM

Post #15

QUOTE(seanmac @ 29 Jul, 2008 - 06:46 PM)

QUOTE(nickmorss @ 24 Jul, 2008 - 04:01 AM)

Hi,
I went to look at your link:
"http://pistachiomonkey.com/blog/archives/133"
but got a 404 page missing... Any chance I can still find this info somewhere?
Cheers
Sean

It links to:
http://www.dreamincode.net/forums/%5C%22ht...hives/133%5C%22

This is the acutual link:
http://pistachiomonkey.com/blog/archives/133