/    Sign up×
Community /Pin to ProfileBookmark

Centering the body of a website?

Copy linkTweet thisAlerts:
Mar 26.2009

Does anyone have any suggestions on how to center the body of a website horizontally and automatically so it stays centered even with a browser resize?

I have been doing this:

[CODE]
body{margin: 0 auto 0 auto;}
[/CODE]

However, that has been causing problems with my Google Ads in IE7, so I want to get away from it.

I would prefer to use this for my body tag to solve my Google Ads problem:

[CODE]
body{margin: 0;}
[/CODE]

However, that clearly does not automatically center the website horizontally. How can I keep the margin: 0; setting but still automatically center my website?

Thanks in advance!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@svidgenMar 26.2009 — I'm pretty sure it's either that or setting [I]text-align: center;[/I]. However, one thing I would suggest is creating a fixed-width container DIV and centering that, rather than BODY.

In regards to the Google Ads, I seem to recall having to create ad containers to keep those in place on thepointless.com in the past.
Copy linkTweet thisAlerts:
@papilindo701Mar 26.2009 — hey try this

in the container have a specific width and then do margin: 0 auto;


then do min-width: (whatever the size you want) in the body css
Copy linkTweet thisAlerts:
@zenthoefauthorMar 26.2009 — I tried something like this:

[CODE]<head>
<title>Example</title>
</head>

<body>
<div style="text-align:center">
Content goes here.
</div>
</body>[/CODE]

However, this made the text all centered (and not spaced equal distance left to right, but justified center), but nothing else was centered. The left and right margins of my body were not equal. What I got was no left margin and a big right margin for the whole page.


I also tried a div with a specific width and margin: 0 auto; where the div above is, but that also did not work. I had a tiny left margina nd a huge right margin.

Any other suggestions?

Thanks!
Copy linkTweet thisAlerts:
@svidgenMar 26.2009 — If you enclose everything in a centered table, the table will collapse to the width of your content:

[code=html]<table style='margin: 0px auto;'>
<tr>
<td>
all your content goes here.
</td>
</tr>
</table>[/code]

However, a lotta people are going to disapprove of that technique (it's that nasty TABLE word).

People often do this with a double-whammy:
[code=html]<html>

<head>

<style type='text/css'>
body {
text-align: center;
}

.container {
text-align: left; /* leave off if you want child elements centered */
margin: 0px auto;
width: 700px;
}
</style>

</head>

<body>
<div class='container'>
content goes here.
</div>
</body>

</html>[/code]

Some browsers don't interpret the CSS rules as centering rules, other browsers don't center certain elements with text-align. Alternatively, you could use a highly shunned approach and just enclose everything with <CENTER></CENTER> tags ...

Nothing wrong with being looked down on if you meet your goal, really.
Copy linkTweet thisAlerts:
@WebJoelMar 26.2009 — Don't 'center' the body, it causes problems. Assume "auto" or "100&#37;" width on BODY , and build a 'container' or 'wrapper' DIV inside of "body", give it a width (percentage okay) and "margin:0 auto;" (and any valid !doctype) will center this.

"text-align:center" centers the [I]content[/I]-only of the element, not 'centers the element' itself. TABLEs is a bad approach, it is over 10-yeers deprecated and your page is non-tabular data, and create havoc for Assistive technologies for the handicapped, and for proper indexing of your page in search engines/'bots/spiders.

"min-width: [I]foo[/I];" does not work on IE less-than v.8 I think (maybe it works on v.7, -but I doubt it)

body {....}

#wrapper {margin:0 auto; width:90%;....}

whereby "wrapper" is the child of "body", is centered AND fluid (always 90% of BODY) Avoid "centering" the body... it can cause major headaches later on when the page gets more technical and advanced... "BODY" should always be 100% or auto, and then create elements that 'resize' within the "body"
Copy linkTweet thisAlerts:
@zenthoefauthorMar 26.2009 — WebJoel -

You [I]are the [B]man![/B]!!![/I] I've almost completely got rid of all these problems now. It helps to put the body to 100% and the specify a wrapper with a set width with the auto margins.

THANKS A TON!!!
Copy linkTweet thisAlerts:
@WebJoelMar 28.2009 — -I only [I]look[/I] new... ?
×

Success!

Help @zenthoef spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...