How to centre web page as shown here..?

EdBarnett · Apr 30, 2007

Hi everyone. I am new to the forum and was wondering if anyone could help me with this rather simple problem (but a problem all the same).

I was wondering how to centre a website by default as seen here:

http://www.chasepharmajobs.com/

and here

http://www.bionicandbreathe.com/forum/index.php

I could take a guess at it being frames, but I am uncertain how to make them resize depending on the brower being used so that the central frame always ends up dead in the centre.

Thanks guys

Ed

vacunita · Apr 30, 2007

There are several ways of doing it. You could use the not recommended, and deprecated <center> tag.

Or you could use CSS.

Wrap the Webpage in an outer DIV. give the outer div a defined width, and then set the margins of the div to auto and it will center itself.

Code:

in your CSS block, stylesheet file place this :
#centerdiv{
width:[green]xxx[/green]px; \\[green]Where XXX is a value that fits your webpage.[/green]
margin-left:auto;
margin-right:auto;
border:1px solid red; [green]This is juts so you can see the div, and where it is placed.[/green]
}

Then in the body of your document:

Code:

...
<body>
<div id="centerdiv">

[red]Rest of webpage code goes in here[/red]

</div>
</body>
...

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

EdBarnett · May 1, 2007

Hi vacunita. Thanks for the reply! Would this centre be restricted to the values that I originally enter for width in #centerdiv ? Or would this centre for any resolution a user has? (I think I know the answer but thought it worth asking). Thanks again. Ed

vacunita · May 1, 2007

It will center for any resolution. The width value, is just so the wrapping div can accommodate your website, without it being cutoff.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

EdBarnett · May 2, 2007

Thanks mate. I appreciate it

GUJUm0deL · May 3, 2007

Use CSS.

Code:

body { align: center; }

____________________________________
Just Imagine.

http://www.imajinarts.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to centre web page as shown here..?

EdBarnett

Technical User

vacunita

Programmer

EdBarnett

Technical User

vacunita

Programmer

EdBarnett

Technical User

GUJUm0deL

Programmer

Similar threads

Part and Inventory Search

Sponsor