Making a website align in center of page?

Mokothemonkey · September 11, 2009

I am looking to make a website so it is all aligned in the center of the page, with a different background in the back.

For example - My Blog is all centered in the middle, with a brown background.

Also ThinkGeek is an example.

Don't know what it's called, so I couldn't use google

Wizard · September 12, 2009

Do you know CSS?

Byron · September 12, 2009

And if you don't know CSS or even if you do, you can always use a table.

<tr>

<td>

Page Content

</td>

</tr>

</table>

Mokothemonkey · September 13, 2009

Wow I never thought of using tables :mellow:

Thanks!

Nightcracker · September 17, 2009

Wow I never thought of using tables
Thanks!

Tables are bad, a table get's shown when ALL content in the table is loaded. If you have big images on your page the page won't show anything until the pictures and everything else is loaded. Never put a whole site in a table. Use this instead:

<div align="center">
%CONTENT HERE%
</div>

Mokothemonkey · September 18, 2009

Wow I never thought of using tables
Thanks!
Tables are bad, a table get's shown when ALL content in the table is loaded. If you have big images on your page the page won't show anything until the pictures and everything else is loaded. Never put a whole site in a table. Use this instead:
<div align="center">
%CONTENT HERE%
</div>

Yes tables are icky

thanks for the suggestion

October 2, 2009

You could use CSS to do multiple columns with the main area in the center column. You use the float: right and Float: left options to put the to outer colums on the left and right and then the rest in the middle.

If you google multiple colum layout with CSS you will get several examples.

Here is one example:

<html>

<head>

<!--

#lfcol {

float: left;

margin-left: 1em;

margin-right: 1em;

width: 8em;

background-color: gray;

padding: 5px 5px 5px 5px;

border-right-width: 2px;

border-right-style: groove;

}

#rtcol {

float: right;

width: 8em;

margin-left: 1em;

margin-right: 1em;

background-color: lightblue;

padding: 5px 5px 5px 5px;

border-left-width: 2px;

border-left-style: groove;

}

#footer { padding-top: 20px;

background-color: green;

clear: both;

}

--></style>

</head>

<body>

<H1>This is the Header</h1></center>

<p> This paragraph should be in the left column of the page. It should have a gray background. dadad

asdasdasdasd asd asd asd asd asd as asd asd

as asd asd asd as as asd asd asd asd asd as

as as asd as as asd asd asd asd asd <p>

<p>Para 2 of left. asdasdasdas sad asd asd asd asd asd asd asd asd asd

as asd asd asd asd asd asd as asd aewqrd asd wer asd

asr wer asd wer

rw er wer rwe rwer ewr wer ewr

</p>

</div>

<p> This paragraph should be in the right column of the page. It should have a blue background. dadad

asdasdasdasd asd asd asd asd asd as asd asd

as asd asd asd as as asd asd asd asd asd as

as as asd as as asd asd asd asd asd <p>

<p>Para 2 of right. asdasdasdas sad asd asd asd asd asd asd asd asd asd

as asd asd asd asd asd asd as asd aewqrd asd wer asd

asr wer asd wer

rw er wer rwe rwer ewr wer ewr

</p>

</div>

<p>This is the middle text. Hopefully it appears correctly.</p>

<p>werwer wer ew wer wer wer wer ewrsdzfsd ewr ewr wer wer wer wre we

wrewrew wer wer wer ewr we wer f e4t tr4543rsdfs wer fe esr ef

efsdf sdr sef rtwe rse sr wer wer ewr wer ewr 4t 435 34r

</p>

<h2>This is the footer area. It should be cetered</h2>

</center>

</div>

</body>

</html>

[\code]

Vincent C. · October 3, 2009

Make sure to conform to XHTML Transitional or Stict, it's the official web standard.

Use <span text-align="center>[Content]</span> or the equivalent in CSS!

MrFish · October 5, 2009

No no no, all bad examples above.

1. Tables should never be used for a layout.

2. text-align shouldn't be used to align a page (though it's possible, it's very bad practice)

3. <center> is not W3C approved, and also bad practice.

The right way:

HTML:

<div id="wrapper">
     <!-- Wrapper used to align page, the rest of your site goes here -->
</div>

CSS:

#wrapper{
     margin: 0px auto;
}

And that's it. The first number, '0px', defines how much space to put between the top and bottom of the page. The second, 'auto', automatically sets a margin equal size on the left and the right of the element. Even if you resize the window it will continue to stay in the middle. If you want to set individual sides you can use 4 parameters instead of two

Example:

#div{
     margin: 5px 5px 25px 3px;
}

And the order goes top-right-bottom-left (clockwise). And if you don't like shorthand you can always do it the hard way:

#div{
     margin-top: 5px;
     margin-right: 5px;
     margin-bott . . . etc
}

On a side note, if you are trying to get 0px margin on the top you won't be able to unless you edit the body padding. By default, the <body> tags come with padding. So if you set it's padding to 0 then you can get elements to touch the very top and bottom of the page:

body{
     padding: 0px;
     margin: 0px; // I'm actually not sure if it's padding or margin. Do both for good measure!
}

Hope this helps!

Wizard · October 5, 2009

No no no, all bad examples above.

Congrats. For this, you win jerk of the week. Here's your medal.

Byron · October 6, 2009

The right way:

HTML:
<div id="wrapper">
                                 
</div>
CSS:
#wrapper{
                                 margin: 0px auto;
}
And that's it. The first number, '0px', defines how much space to put between the top and bottom of the page. The second, 'auto', automatically sets a margin equal size on the left and the right of the element. Even if you resize the window it will continue to stay in the middle.

That won't center your site for all browsers and if you want all browsers to see your page the same way you'll need to use text-align:center; either in the body or in another division like this:

CSS

.center {
text-align: center;
width: 100%;
}

#wrapper {
text-align: left;
margin-left: auto;
margin-right: auto;
width: 800px;
}

---------------

<div class="center">
<div id="wrapper">

Page Content

</div>
</div>

http://locusmeus.com/html-css/centeringpage.html

http://www.maxdesign.com.au/presentation/center/

MrFish · October 6, 2009

Congrats. For this, you win jerk of the week. Here's your medal.

What, no icing on the cake?

That won't center your site for all browsers and if you want all browsers to see your page the same way you'll need to use text-align:center; either in the body or in another division like this:

That is true, I know for internet explorer at least you will need to add that to the body.

Mokothemonkey · October 11, 2009

Congrats. For this, you win jerk of the week. Here's your medal.
What, no icing on the cake?

That won't center your site for all browsers and if you want all browsers to see your page the same way you'll need to use text-align:center; either in the body or in another division like this:
That is true, I know for internet explorer at least you will need to add that to the body.

Wow I never thought I would get this many replies 0_o

It seems there are multiple ways, but I have just one point to make about the tables:

If you made multiple tables aligned in the center so it all wasn't in the same table, would that make it load faster - b/c tables load everything in them before appearing in some browsers? Although this may make a bit of a space between some tables, but I am sure a bit of css could fix it up.

So would that work?

EDIT:

So instead of this:

<table>
stuff
stuff
more stuff
huge image file
lot's of stuff
even more stuff
some random javascript
seo links
etc
etc
etc
</table>

It would be this:

<table>
stuff
stuff
</table>
<table>
more stuff
</table>
<table>
huge image file
lot's of stuff
</table>
<table>
even more stuff
some random javascript
</table>
<table>
seo links
etc
etc
etc
</table>

And yes I know it should be

<table>

<tbody>

stuff

</tr></td>

</tbody>

</table>

just making it shorter

Byron · October 11, 2009

So instead of this:

<table>
stuff
stuff
more stuff
huge image file
lot's of stuff
even more stuff
some random javascript
seo links
etc
etc
etc
</table>

It would be this:

<table>
stuff
stuff
</table>
<table>
more stuff
</table>
<table>
huge image file
lot's of stuff
</table>
<table>
even more stuff
some random javascript
</table>
<table>
seo links
etc
etc
etc
</table>

And yes I know it should be

<table>

<tbody>

stuff

</tr></td>

</tbody>

</table>

just making it shorter

Yes that would work and each table would load seperatly starting from the top. So while your reading the contents of the first table, you other tables could be loading.

You don't have to use <tbody>. Just do it like this:

<table>

<tr>

<td>

stuff

</td>

</tr>

</table>

Byron · October 11, 2009

Quote from my old WebTech courses:

Now, the major problem with having all your page content inside a single table is the rendering time it takes a browser to work out the table and it's contents before displaying anything on the page.

You can overcome this by using several identical tables stacked one below the other. We briefly covered this as an extra to the Tables lesson. Splitting your page up into several tables allows the first table to be displayed while the browser works on displaying the others and this gives the impression that your page loads fast as your visitor has something to look at while the rest of the page loads.

http://www.webtechu.com/adv3/moretables-2a.php

Making a website align in center of page?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest JF_Sly

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation