HTML and CSS

center the page? help

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 74

Reputation: sacarias40 is an unknown quantity at this point

Solved Threads: 0

sacarias40 sacarias40 is offline

Offline

Junior Poster in Training

center the page? help

Dec 28th, 2008

i have a webpage that i built on my computer. a 1024x768 reslolution screen is what i used. but when i use a bigger monitor, the page is the same size, but its pushed up against the left side of the monitor.
could somebody tell me the way to always keep it in the center nomatter what size screen is being used to view the page?

thanks in advance.

•

Join Date: Oct 2008

Posts: 76

Reputation: ccube921 is an unknown quantity at this point

Solved Threads: 6

ccube921

Offline

Junior Poster in Training

Re: center the page? help

Dec 28th, 2008

Using css, this code would do it:

Help with Code Tags

(Toggle Plain Text)

position:absolute;
left:50%;
margin:The number here should be negative half your pages width;

Meaning if your page were 200px wide, the code would be:
margin:-100px;

If I have been helpful add to my reputation!

•

Join Date: Dec 2008

Posts: 63

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Re: center the page? help

Dec 28th, 2008

•

Originally Posted by sacarias40

i have a webpage that i built on my computer. a 1024x768 reslolution screen is what i used. but when i use a bigger monitor, the page is the same size, but its pushed up against the left side of the monitor.

Why don't you just let the page fill the browser window no matter what size it is? That's what a browser does by default. If your page doesn't do that, you have done something to prevent it, like giving a fixed width for your content.

If you always want to have a margin on your page, give the body (or main div) a width and margin: auto:
Help with Code Tags

css Syntax (Toggle Plain Text)
body
{
 width: 80%;
 margin: auto;
}
body { width: 80%; margin: auto; }

•

Join Date: Jan 2007

Posts: 276

Reputation: kanaku is on a distinguished road

Solved Threads: 15

kanaku

Offline

Posting Whiz in Training

Re: center the page? help

Dec 29th, 2008

The most popular way of centering your content is to put your whole body in one div with and id (ie container) and add this in your css code:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

div#container
{
margin: 0 auto;
width: (the width you want, could be in %, px, or em)
}

The margin attribute can have 2, 3, or 4 values. If it contains just 2 values (like in the example above), the first value is for the top and bottom margins and the second value is for the left and right margins.

When you specify 'auto' whatever space is not used by your width gets divided into two. So if your layout is 800px and the screen width is 1000px, the 'auto' value makes a 100px margin on the left and right side.

FOR CURIOSITY'S SAKE...
Just for reference, the html's body looks like this:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<body>
<div id="container">
 
... all the content stuff here...
 
</div>
</body>
<body>
<div id="container">

... all the content stuff here...

</div>
</body>

When you use 4 values in your margin attribute, they are specified in the following order: top, right, bottom, left (clockwise from the top). I can't remember what's the 3-value for. hehe

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: center the page? help

Dec 29th, 2008

Hope this will help u up!

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Centering The Page</title>
<style type="text/css" media="all">
/* <![CDATA[ */
@media screen {
html, body {
     height: 100%;
     min-width: 800px;
     max-width: 1024px;
     width: 100%;
}
 
body { 
     background-color: #eee;
     color: #000;
     text-align: center;
}
 
body #wrapper {
     background-color: #fff;
     border: 0;
     color: inherit;
     height: 100%;
     margin: 0 auto;
     max-width: 1000px;
     text-align: left;
     width: 100%;
  }
}
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Centering The Page</title>
<style type="text/css" media="all">
/* <![CDATA[ */
@media screen {
html, body {
     height: 100%;
     min-width: 800px;
     max-width: 1024px;
     width: 100%;
}
       
body { 
     background-color: #eee;
     color: #000;
     text-align: center;
}

body #wrapper {
     background-color: #fff;
     border: 0;
     color: inherit;
     height: 100%;
     margin: 0 auto;
     max-width: 1000px;
     text-align: left;
     width: 100%;
  }
}
/* ]]> */
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>

•

Join Date: Jan 2007

Posts: 3,193

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 162

MidiMagic

Offline

Posting Sensei

Re: center the page? help

Dec 29th, 2008

Use the method in poist #4 for horizontal centering.

Negative values in styles are not standard, and don't always work.

There is no reliable way to center content vertically on a page that works on all browsers, screen resolutions, and window sizes. Stop trying to do that. Just put a top margin on the content, and let the bottom fall where it will.

Never use pixel sizes to define anything. Use points for text, and percent for object sizes.

Daylight-saving time uses more gasoline

•

Join Date: Nov 2008

Posts: 74

Reputation: sacarias40 is an unknown quantity at this point

Solved Threads: 0

sacarias40 sacarias40 is offline

Offline

Junior Poster in Training

Re: center the page? help

Dec 30th, 2008

thank you guys for your help i believe i will try the 4th post because it looks most easy and practical.
once more thank you again.

•

Join Date: Nov 2008

Posts: 74

Reputation: sacarias40 is an unknown quantity at this point

Solved Threads: 0

sacarias40 sacarias40 is offline

Offline

Junior Poster in Training

Re: center the page? help

Dec 30th, 2008

ahhggg i cant get it to work.
here is the link
www.livingandlegacy.com
if that could help me by posting it...

•

Join Date: Nov 2008

Posts: 74

Reputation: sacarias40 is an unknown quantity at this point

Solved Threads: 0

sacarias40 sacarias40 is offline

Offline

Junior Poster in Training

Re: center the page? help

Dec 30th, 2008

and help with positioning the google search bar would help too.

•

Join Date: Mar 2008

Posts: 73

Reputation: lio04 is an unknown quantity at this point

Solved Threads: 4

lio04

Offline

Junior Poster in Training

Re: center the page? help

#10

Dec 30th, 2008

Change your wrapper div on the page to <div id="wrapper"> and in the CSS file set fixed width and margin, which will have value 0 auto.

Try this:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
#wrapper {
        width: 1000px;
        height: auto;        
        margin: 0 auto;
}
#wrapper {
        width: 1000px;
        height: auto;        
        margin: 0 auto;
}