By techguy10 on

I know that this isn't that hard to do with regular css but sometimes things seem to get messed up when dealing with the page.tpl.php file when I put do things that make perfect sense to me, anyways I would appreciate if someone could instruct on what you need to do in a drupal css theme to make it always stay centered, I did a search on this but nothing came up which I'm guessing is due to the search function on this site not being the greatest.

⋅ Categories: Drupal 5.x

Comments

onejam’s picture

onejam commented

Not sure how much CSS skills you have but to basically centre your page, use:

body {
	padding: 0;
	margin: 0;
	text-align: center; /* Centres the page on IE */
}

.wrapper {
	width: 950px; /* This is the width of your main page */
	margin: auto; /* This helps to centre the page */
	text-align: left; /* pull the fonts back to aligning left because of the text centre in body */
}

NOTE: .wrapper CSS class is the one that surrounds your actual content page. You could call it anything else you want but make sure you had that to your page.tpl.php file and the code above to your style.css file. Don't forget to change the width=960px to whatever your width is for your main page.

I think the search on Drupal.org works quite well considering how much information there is. Maybe, try better keywords next time.

Hope that helps.

---------- Personal Blog | tutorials | photogaphy -----------
Freelance web designer/developer: duvien.com

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

nevets’s picture

nevets commented

Start by creating the html like this (body only shown)

<body>
<div id="page">
.... The rest of the layout ....
</div>
</body>
You can give the div any id you want, then if you want the content portion to be fixed width add something like this to style.css
<code>
#page {
  width: 900px;
  margin: 0 auto;
}

You can set the width as desired, the important part is the left and right margins need to be set to auto.

If on the otherhand you want the content width to vary but still want "space" on either side I think something like this will work.

#page {
  margin: 0 10%;
}

This time it is important to set the left and right margins to the same value (here we use 10%). It can be a relative value like 10% or even a fixed value like 100px.