Page 1 of 1

Align your page to the center of the browser window with css Rate Topic: ***** 3 Votes

#1 xfodder  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 72
  • Joined: 24-November 02

Posted 30 October 2006 - 12:25 AM

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

<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)
#wrapper {
	margin: 0 auto;
	width: 700px;
}



Now create a new div INSIDE the wrapper div, name it something useful like content
<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)
#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 October 2006 - 11:10 PM


Is This A Good Question/Topic? 1
  • +

Replies To: Align your page to the center of the browser window

#2 Tuzoid  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 3
  • View blog
  • Posts: 120
  • Joined: 20-August 06

Posted 12 November 2006 - 03:41 AM

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 :)
Was This Post Helpful? 0
  • +
  • -

#3 xfodder  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 72
  • Joined: 24-November 02

Posted 02 January 2007 - 10:12 AM

View PostTuzoid, on 12 Nov, 2006 - 07:41 PM, said:

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 :)
Was This Post Helpful? 0
  • +
  • -

#4 Niemi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 14-March 07

Posted 14 March 2007 - 02:38 PM

Quite right, but it only centers the DIV horizontally, not vertically.
Was This Post Helpful? 0
  • +
  • -

#5 xfodder  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 72
  • Joined: 24-November 02

Posted 30 March 2007 - 08:28 AM

View PostNiemi, on 15 Mar, 2007 - 07:38 AM, said:

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 :)
Was This Post Helpful? 0
  • +
  • -

#6 AndyBo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-April 07

Posted 02 May 2007 - 09:03 AM

View Postxfodder, on 30 Mar, 2007 - 08:28 AM, said:

View PostNiemi, on 15 Mar, 2007 - 07:38 AM, said:

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? :blink:

This post has been edited by AndyBo: 02 May 2007 - 09:06 AM

Was This Post Helpful? 0
  • +
  • -

#7 WhiteFang  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 20-April 08

Posted 21 April 2008 - 07:34 AM

extremely helpful mate - my blog now has no flaws (i hope)
Was This Post Helpful? 0
  • +
  • -

#8 jbharding  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-May 08

Posted 11 May 2008 - 10:10 AM

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 - 10:11 AM

Was This Post Helpful? 0
  • +
  • -

#9 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 97
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Posted 11 May 2008 - 10:28 AM

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.
Was This Post Helpful? 0
  • +
  • -

#10 jbharding  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-May 08

Posted 11 May 2008 - 10:37 AM

View Postcapty99, on 11 May, 2008 - 10:28 AM, said:

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.



Thanks! I get it - extremely helpful!!!
Was This Post Helpful? 0
  • +
  • -

#11 Phantom  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 05-February 06

Posted 14 May 2008 - 02:36 AM

Doesn't seem to work in IE 7
Was This Post Helpful? 0
  • +
  • -

#12 jbharding  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-May 08

Posted 15 May 2008 - 11:01 AM

View Postjbharding, on 11 May, 2008 - 10:37 AM, said:

View Postcapty99, on 11 May, 2008 - 10:28 AM, said:

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.



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
Was This Post Helpful? 0
  • +
  • -

#13 nickmorss  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 24-July 08

Posted 24 July 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 http://pistachiomonk...og/archives/133
Was This Post Helpful? 1
  • +
  • -

#14 seanmac  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 29-July 08

Posted 29 July 2008 - 06:46 PM

View Postnickmorss, on 24 Jul, 2008 - 04:01 AM, said:

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
Was This Post Helpful? 0
  • +
  • -

#15 php_newb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 16
  • Joined: 01-December 07

Posted 29 October 2008 - 09:30 PM

View Postseanmac, on 29 Jul, 2008 - 06:46 PM, said:

View Postnickmorss, on 24 Jul, 2008 - 04:01 AM, said:

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


It links to:
http://www.dreaminco...hives/133%5C%22

This is the acutual link:
http://pistachiomonk...og/archives/133
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1