Log in

View Full Version : 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
<center></center> but it didn't work in mozilla but on the other browsers it did. I would like to avoid using the CSS
left: 300px; top: 0px; or any margins. My divs remain on the left side if I am not going to use the
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? :confused:
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
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:



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


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



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


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


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


<!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 (http://www.codehelp.co.uk/html/deprecated.html), and should'nt be advocated.

Hope that makes sense.
BLiZZaRD
09-07-2008, 03:53 PM
Methinks the redundant button is stuck... heh. :D
Medyman
09-08-2008, 01:46 AM
Methinks the redundant button is stuck... heh. :D

Not redundant...just thorough!

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