Centering page in any browser

**Geline** · 09-07-2008, 01:38 PM

Hello there! I am having this problem of centering my page. It is because I want my page to be viewed in center using any screen resolution and/or browser. I am currently using FF3 with screen resolutions of 1024x768. So, I tried using

Code:

<center></center>

but it didn't work in mozilla but on the other browsers it did. I would like to avoid using the CSS

Code:

left: 300px; top: 0px;

or any margins. My divs remain on the left side if I am not going to use the

Code:

left: 300px; margin-left: 2em;

and so on.

I saw a some pages that are centered even if using different browsers and screen resolutions. How do I resolve this?

**BLiZZaRD** · 09-07-2008, 01:45 PM

Why would you not want to use CSS? Could solve this in about 4 lines if you did.

Link to the page so we can see the creation you have to help in a non-CSS (and apparently non-Standards) way?

**Geline** · 09-07-2008, 01:49 PM

Originally Posted by BLiZZaRD

Why would you not want to use CSS?

I tried using CSS but, in other browsers and screen resolutions, my page looks cluttered. I hope you get what I mean.

**BLiZZaRD** · 09-07-2008, 02:04 PM

Then you are coding correctly

Link?

**BLiZZaRD** · 09-07-2008, 02:49 PM

Whenusing CSS (which IS truly simple and cross-browser supported) you would make a container div, then in the body styling of the CSS you would text-align: center;

the HTML layout would look similar to:

HTML Code:

<body>
<div class="container">
//rest of content here
</div>
</body>
</html>

In the CSS, you would set width specs for .container like so:

Code:

.container {
      width: 80%;
/* any other special attributes needed */
}

Using % instead of an em or px will make it that percentage of the viewport, so no matter the resolution it would only take up 80% of it, and with the body text-align centered, it would center that 80% in the full width of the viewport.

**rangana** · 09-07-2008, 03:29 PM

The other way around to center an element is by using the centering technique for block elements (highlighted):

Code:

<style type="text/css">
#wrap{
width:500px;
margin:20px auto;
border:1px solid red;
text-align:center;
}
</style>
<div id="wrap">This is the content of wrap div</div>

...this should work well on FF, but IE, being on quirksmode, must have a DTD:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

...so the complete code which works cross-browser and will center your element on any resolution is:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#wrap{width:500px;margin:20px auto;border:1px solid red;text-align:center;}
</style>
</head>
<body>
<div id="wrap">This is the content of wrap div</div>
</body>
</html>

Also note the center is a deprecated tag, and should'nt be advocated.

Hope that makes sense.

**BLiZZaRD** · 09-07-2008, 03:53 PM

Methinks the redundant button is stuck... heh.

**Medyman** · 09-08-2008, 01:46 AM

Originally Posted by BLiZZaRD

Methinks the redundant button is stuck... heh.

Not redundant...just thorough!

Rananga, rightfully, pointed out that a simple text-align:center will not achieve centered content in all browsers.

Thread: Centering page in any browser

Thread Tools

Search Thread

Centering page in any browser

Bookmarks

Bookmarks

Posting Permissions