FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


How to "center" a website





gverutes
Hi,

I don't have a lot of experience creating webpages, but I have used Dreamweaver and know basic HTML code. My biggest problem is that when I try to create a site, I want to center all the content...now I don't mean centering the text, but the ENTIRE page. FOr example, look at the NY Times website: http://www.nytimes.com/

No matter how big the monitor you use to view it, all the content is centered on the page. Does anyone know quick code so that I can center my entire page for all monitor sizes?

Thanks.
AftershockVibe
It's actually pretty trivial if you intended to use HTML alongside CSS (as all web developers should in this day and age!). You basically just wrap your content with a container with a fixed width and margins set to automatic (or 100%).

There are a ton of sites which will tell you how to do this but here's the first one that Google threw up:
http://davidwalsh.name/horizontally-center-website-structure-css
ProwerBot
AftershockVibe wrote:
It's actually pretty trivial if you intended to use HTML alongside CSS (as all web developers should in this day and age!). You basically just wrap your content with a container with a fixed width and margins set to automatic (or 100%).

There are a ton of sites which will tell you how to do this but here's the first one that Google threw up:
http://davidwalsh.name/horizontally-center-website-structure-css


lol 999 posts

I usually make the content set to 70% and centered, that usually looks good enough to me.
gverutes
perfect -- thanks for the help.
Possum
Great link..

My site is centered. But not as well done as that link teaches it..
tchaunt
It may have been just a bad copy of the program, but I'm almost sure the Internet Explorer does not interpret the auto-margin tag. I may be wrong, though...

For my original site, I really wanted it centered. In order to get the div centered but the content aligned to the left, I just simply used CSS and HTML similar to the following:

CSS:
Code:

body {text-align: center;}
.content {text-align: left; width: 75%; border: 1px solid black;}


HTML:
Code:

<html>
   <body>
     <div id="content">
       CONTENT GOES HERE
     </div>
   </body>
</html>


Obviously enough, I don't leave the tags that basic, but that's the very basic skeleton of how it should look (without importing the CSS, any meta tags, etc.)
ponda
Quote:
Hi,

I don't have a lot of experience creating webpages, but I have used Dreamweaver and know basic HTML code. My biggest problem is that when I try to create a site, I want to center all the content...now I don't mean centering the text, but the ENTIRE page. FOr example, look at the NY Times website: http://www.nytimes.com/

No matter how big the monitor you use to view it, all the content is centered on the page. Does anyone know quick code so that I can center my entire page for all monitor sizes?

Thanks.

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

Just put all your content in a div, call it wrapper or container or something, and in the css set the left and right margins to auto. Easy!
tchaunt
Ponda, as I said, I'm almost sure that IE does not interpret the auto-margins. When I viewed my website in Internet Explorer, it would not center at all. Thus, I used the code I posted above.
JVermolen
If u use XHTML 1.1
HTML code:
Code:

<!-- this is the very top of the page -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>This is the title of the page</title>
</head>
<body>
<div id="container">
      CONTENT HERE
</div>


And if u use this CSS:
Code:

body {
        /* Nothing actualy to be done here */
}

#container {
   margin: 0px auto;
   width: /* Your sites width */
}


Your site will always be centered.
This code is XHTML 1.1 valid and CSS 2.1 valid
pentangeli
tchaunt wrote:
Ponda, as I said, I'm almost sure that IE does not interpret the auto-margins. When I viewed my website in Internet Explorer, it would not center at all. Thus, I used the code I posted above.


Block level elements are incorrectly defined in IE when using text-align. You would place the text-align in the body as you have done, but then this starts playing daddy knows best with the rest of the inline elements. You have to define them specifically thereafter within their selectors. Like so...

Code:


body {
   margin:(whatever)px 0px; padding:0px;
   [b]text-align:center;[/b]
   }
   
Whatever {
   width:(whatever)px;
   margin:0px auto;
   [b]text-align:left;[/b]
   }


But really, it's hacky and more effort than required. JV above already nailed it.
sonam
Older IE browser don't care about css margin: 0 auto; but it is possible to center all content with body definition (text-align: center). Of course if you don't want to put this definition for body and use it for all browsers (what is simplest way) it is possible to use conditional comment, too. In that case you need to put comment on all your pages. Shocked Read more here: http://www.quirksmode.org/css/condcom.html

Example below will center body tag only in Internet Explorer lower or equal to 6.
Code:

<!--[if lte IE 6]>
body{
  text-align: center;
}
<![endif]-->


Sonam
tamilparks
now its looking very nice
Flakky
sonam wrote:
Older IE browser don't care about css margin: 0 auto; but it is possible to center all content with body definition (text-align: center). Of course if you don't want to put this definition for body and use it for all browsers (what is simplest way) it is possible to use conditional comment, too. In that case you need to put comment on all your pages. Shocked Read more here: http://www.quirksmode.org/css/condcom.html

Example below will center body tag only in Internet Explorer lower or equal to 6.
Code:

<!--[if lte IE 6]>
body{
  text-align: center;
}
<![endif]-->


Sonam
I can get very tired of this. People should just live with the fact that the pages are displayed incorrect or simply update to a modern browser. It's not that hard :/

I refuse to go an extra mile for internet explorer Sad
sonam
Flakky wrote:
I refuse to go an extra mile for internet explorer Sad


Me to. I am just give an example but I don't use it from last year when IE6 drop on few % users.

Sonam
jarmush
my CSS:

#main{
width:80%;
padding-left:10%;
padding-right:10%;
}

other blocks like header, content,footer etc. i put into this element.
keyman
I've seen so many web designers say they have given up with IE and are fed up with it, it's never been standards-compliant and can be nothing but frustrating sometimes.
sixstring_psycho
AftershockVibe wrote:
It's actually pretty trivial if you intended to use HTML alongside CSS (as all web developers should in this day and age!). You basically just wrap your content with a container with a fixed width and margins set to automatic (or 100%).

There are a ton of sites which will tell you how to do this but here's the first one that Google threw up:
http://davidwalsh.name/horizontally-center-website-structure-css


I am having the same problem on higher resolutions. I may have to try this one, but will look further if it does not work. I just recently started learning CSS... pretty amazing compared to just HTML and I still have a long ways to go... but its awesome once you start figuring things out!
boinsterman
I use the center tag and margin:auto

Code:
.
.
.
<style>
body {
margin-left:auto;
margin-right:auto;
}
</style>

.
.
.
<body>
<center>
</center>
</body>
</html>


While the center tag is deprecated in HTML 4.01, it seems to work in everything I've used it in.[/code]
playhouse
make sure the margins are specified as explicit sizes

ie a margin{0 0 0;} will have 0 margin, not auto margin
sysna
most of the times you can center a website if you put "margin-left: auto; margin-right: auto;" in the css file for the whole body of you website but it doesn't work correctly in internet explorer always, some times it need to set a width for body or sometimes even with specific width it doesn't work again. if you forget IE then the margin trick will do the job.
ankur209
Its simple ! There are two ways to do that !

1. Either try using the <div> tag or
2.You can make the whole website appear in a table and then can align the table

But I think the best one will be the use of CSS : try that u create a div id and then center the {margin:center} Razz
Dialogist
ProwerBot wrote:
AftershockVibe wrote:
It's actually pretty trivial if you intended to use HTML alongside CSS (as all web developers should in this day and age!). You basically just wrap your content with a container with a fixed width and margins set to automatic (or 100%).

There are a ton of sites which will tell you how to do this but here's the first one that Google threw up:
http://davidwalsh.name/horizontally-center-website-structure-css


lol 999 posts



Very Happy Only that trivial?

It's actually a real pain in the anus to do properly (vertically and horizontally) and keep it wc3 valid, and cross browser.

You need basically two

Code:

<div id="wrapper">
<div id="container">

....content.....

</div>
</div>


You need to have your css respecting

Code:

body{
    text-align: center;
    padding: 0px;
    margin: 0px;
}


...primarily, and then of course

Code:

div#wrapper{
    background-color: transparent;
    width: Your_Width;
    height: Your_Height;
    margin: 0 auto; 
    text-align: left;
}

div#container{
    background-color: transparent;
    border: 0px;
    text-align: center;
    padding: Whatever;
}


And this, after scouring through all of those google results, after hours of trial and error with Chrome, IE, Firefox, Safari, Opera on all Macs, PCs and phones is the only way you're going to achieve this properly.
bobsmith
You have to go w3schools.com,which will sort out all your CSS related problems. To make center of your website you can use a div tag then define “position:releative” in its style sheet.
sonam
bobsmith wrote:
You have to go w3schools.com,which will sort out all your CSS related problems. To make center of your website you can use a div tag then define “position:releative” in its style sheet.


Position relative don't center your site. You need to use width (smaller then body) and margins auto for centering, and (if you like old IE6) body text-align center for it.

Sonam
thanhcuong1990
tchaunt wrote:
It may have been just a bad copy of the program, but I'm almost sure the Internet Explorer does not interpret the auto-margin tag. I may be wrong, though...

For my original site, I really wanted it centered. In order to get the div centered but the content aligned to the left, I just simply used CSS and HTML similar to the following:

CSS:
Code:

body {text-align: center;}
.content {text-align: left; width: 75%; border: 1px solid black;}


HTML:
Code:

<html>
   <body>
     <div id="content">
       CONTENT GOES HERE
     </div>
   </body>
</html>


Obviously enough, I don't leave the tags that basic, but that's the very basic skeleton of how it should look (without importing the CSS, any meta tags, etc.)


I think using div tag and css better than using text-align attribute.
sonam
thanhcuong1990 wrote:


I think using div tag and css better than using text-align attribute.


Text-align is only for IE6 (if any one care about it) and you cannot center div with text-align in other browsers (OK maybe in some other but I don't want to loose time to find out which one Razz ). In that case it is not important what is better to use because there are no solution: margins are winner.

Sonam
shoaib
simply create a container or wrapper and align it in center and put your content into it
sonam
boinsterman wrote:
I use the center tag and margin:auto

Code:
.
.
.
<style>
body {
margin-left:auto;
margin-right:auto;
}
</style>

.
.
.
<body>
<center>
</center>
</body>
</html>


While the center tag is deprecated in HTML 4.01, it seems to work in everything I've used it in.[/code]


Center tag is deprecated in HTML. Rolling Eyes

Sonam
TheLimey
Center tag is the best as per above user. However you may need to worry about cross browser. Chrome, IE, Firefox, even Opera...ew. You need to find a way to center it across all of them.
pauline5765
You wrap everything inside your <body> tag with a container div.

HTML:
Code:

<body>

<div id="container">
All your content here.
</div>

</body>


CSS:
Code:

#container { margin: 0 auto; }
Related topics
Most original website contest
Do you use css to design a website?
picture slide show (java)
How to center something horizontally AND vertically...
CSS - How to vertical center an object in CSS
[resolved] Website "falling apart"
What do you think this website needs??
WebSite Trouble
Admin-Center voor website
Vietnam Business Center, Virtual Office service cheap price
Why you shouldn't use 3iX to host your photography website
Banner need to be center.
call center
how to center swf title to a flash website does anyone know?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.