CSS centering a page

**bals28mjk** · Aug 9, 2007, 20:37

Hey everyone,

I'm fairly new to CSS. I really like how sites like apple and blockbuster center their websites. The page will remained centered until the outer edges are no more. Then when only the content exists it collapses as if it were in an absolute position. Does anyone know how to accomplish this or can point me in the right direction?

Thanks

**Jay-S** · Aug 9, 2007, 22:20

#

#container {
width:800px; put px of your web site...
margin:auto;
height:auto;
}

**bals28mjk** · Aug 9, 2007, 22:43

Thanks Jay-S for your help!

Thats exactly what I wanted, but with only one tiny loop-hole; I'm still left with a few extra pixels on the left when I collapse completely, do you know how I can change that?

**DaveWoods** · Aug 9, 2007, 23:44

Browsers use padding or margins on the body by default so you'll need to set these to 0 like this if you haven't already

Code:

body {
  padding: 0;
  margin: 0;
}

Personally, I prefer to set everything to zero so that I can apply paddings and margins as I want it and not how the browser renders them. You'll probably run into the same issue when you're working with h1, h2 etc.

YOu can set all paddings and margins to zero by using the following rule at the beginning of your CSS.

Code:

* {
  padding: 0;
  margin: 0;
}

This way you don't have to set it for every element that you want to reset

Hope that solves your problem.

**bals28mjk** · Aug 10, 2007, 01:56

Yes it does! Thank you.

p.s. I think these two are gay

what the hell was sitepoint thinking?

**akritic** · Aug 10, 2007, 02:09

Off Topic:

that's the emote for one of the team leaders on sitepoint, you're in for big trouble now.

**Dan Schulz** · Aug 10, 2007, 09:27

Who cares who it belongs to? I'm personally thinking of taking the brothercake smiley and introducing it to the Machine Gun Kelly smiley.

Anyway, as the others have said, put a width on the element, make sure it's set to display: block; (only if an inline element like <span> since block-level elements like H1, H2, P, DIV and so forth don't need it) and then set the margin to 0 auto;

Code:

#container {
    margin: 0 auto;
    width: 760px;
}

**DaveWoods** · Aug 10, 2007, 11:17

If you're centering the whole site then I'd tend to apply this to the body

Code:

body {
  margin: 0 auto;
  width: 760px;
}

Then I'd usually float a container within this

Code:

#container {
  float: left;
  width: 760px;
}

Which then simplifies things when floating other elements inside it. There are otherways but I find that the simplest.

**bals28mjk** · Aug 10, 2007, 14:28

I appreciate all the help from everyone. It's nice to see.

Originally Posted by armchaircritic

Off Topic:

that's the emote for one of the team leaders on sitepoint, you're in for big trouble now.

Haha, you can't be serious. How do you let them get away with having that?

**Dan Schulz** · Aug 10, 2007, 15:00

I typically deal with 100% document height models, so I always have a #container ID applied to a DIV that contains everything but the footer.

Force of habit for me.

**bals28mjk** · Aug 20, 2007, 18:48

I know this is an older thread, but it's topic related...

Well, I got my page centered, but I'm have trouble positioning my elements inside the container. I don't know how to control the elements vertically with the exception of the <br /> and have a crappy method of centering my divs. All I want to do is be able to control where I put my div in the container with ease. Any suggestions? Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php 
//variables

//title
$title_ = "Title";
?>
<style type="text/css">
*{
  padding: 0;
  margin: 0;
}
body {
  margin: 0 auto;
  margin-left:auto;
  margin-right:auto;
  width: 898px;
  background-color:#CCCC66
}
#container {
  float: left;
  width: 898px;
  height: 900px;
  background-color:#999999;

}  

#link1{
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 2px;
}
#link2{
float: left;
height: 25px;
top: 90px;
width: 222px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link3{
float: left;
height: 25px;
width: 222px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 2px 2px 1px
}
#box{
float: left;
left: 80px;
height: 90px;
width: 519px;
background-color:#999999;
border: solid rgb(250,0,250);
border-width: 0px 0px 0px 0px;
}
#innerbox{
  top: 700px;
  float:right;
  width:136px;
  height:177px;
  z-index:1;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}

</style>
<title><? echo $title_; ?></title>
</head>

<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_"><center><? echo $title_; ?></center></h1>
<hr id="myhr" />
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="box"><div id="innerbox"><p align="center">Box</p></div></div>
</div>
</body>
</html>

**DaveWoods** · Aug 21, 2007, 00:41

Without knowing exactly what type of layout you're after it's difficult to advise you other than giving general advice.

Use float's on the elements within your contain to position them next to each other as required, you can then apply paddings and margins to them to space them.

I'd generally wrap specific sections in a div which would give me areas of the page I can work with. header, content, navigation, footer etc might be ID's that I'll apply.

I wrote a tutorial last week for a simple CSS layout which might be useful to explain this http://www.dave-woods.co.uk/?p=73

There's a few other things wrong with your code that I can spot.

1 - Don't use <centre> tags as you can use text-align: center on your h1 within CSS to achieve this.

2 - Use a list to display your menu (again this is explained in my tutorial)

3 - Don't use <br /> for spacing, padding-bottom in the CSS can achieve the same effect.

4 - This is probably personal preference but I'd try not to mix HEX values with RGB. I stick to using HEX values for consistency for all my colour codes.

**wyrd33** · Aug 21, 2007, 00:43

Try this article: http://www.jakpsatweb.cz/css/css-ver...-solution.html (for centering virtical content)
If you just want to position it, say 5px down and 5px to the right, just use padding or margins.

**Dr John** · Aug 21, 2007, 00:52

You are putting all your links in individual divs and then styling each div.
It would be a lot simpler to apply a style to the links directly. Then you'd only need to define it once. And you wouldn't need all that float left, because they are inline elements and will appear in a line. Or you could do what most people do, put the links in as a series of list items and style the list and the links.

Using a separate div for every element you use is called divititis, but it can be cured.

**bals28mjk** · Aug 25, 2007, 04:18

@Dr. John
Divititis indeed. I like using a lot of divisions; they allow maximum control. Are you telling me using a lot will cause rendering problems/slower page loads or do you think it's simpler using different methods?

@wyrd33
Thanks, I definatley got the elements where I wanted, it seems to get a bit sloppy though. Plus I can't overlap elements, do you know a way to do so?

@csswiz
1. Center tag is deprecated, thanks for pointing that out
2. I don't mind using divs unless you can persuade me otherwise
3. Why?
4. I agree; using hex rgb may get confusing, best to stay consistent.

I updated my code and have a few questions (still haven't changed the hex/rgb csswiz).
1. How do I overlap my boxes with one another
2. Why do I have to leave the "padding:" blank for it display propper margins/padding for my main container

Heres my code. Take a peek at it if you want and don't be shy if you think you know a better way of doing it. Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php 
//variables

//title
$title_ = "Title";
?>
<style type="text/css">
*{
  padding: 0;
  margin: 0;
}
#myhr {
width: 90%;
}


body {
  padding: 15px 0px 15px 0px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  margin-bottom:auto;
  width: 904px;
  background-color:#CCCC66;
}
#container {
  padding:
  float: left;
  width: 898px;
  height: 900px;
  background-color:#999999;
  border: solid rgb(250,0,255);
  border-width: 2px 2px 2px 2px

}  
#link1{
margin: 0px 0px 0px 0px; 
float: left;
width: 222px;
background-color:#CCCC66;
height: 25px;
border: solid rgb(250,0,255);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link2{
float: left;
height: 25px;
margin: 0px 0px 0px 0px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
z-index:1;
}
#link3{
float: left;
margin: 0px 0px 0px 0px;
height: 25px;
width: 223px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#link4{
float: left;
height: 25px;
width: 222px;
background-color:#CCCC66;
border: solid rgb(250,0,250);
border-width: 2px 1px 2px 1px;
}
#innerbox{
  width:136px;
  height:177px;
  margin: 0px 0px 0px 68px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox2{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 275px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox3{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 482px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}
#innerbox4{
  width:136px;
  height:177px;
  margin: -182px 0px 0px 689px;
  z-index:0;
  background: #CCCC66;
  border: solid rgb(250,0,250);
  border-width: 2px 2px 2px 2px;

}


</style>
<title><? echo $title_; ?></title>
</head>

<body>
<div id="container"><br />
<h1 id="myh1" class="h1color_" align="center"><? echo $title_; ?></h1>
<div align="center">
<hr align="center" id="myhr" />
</div>
<br />
<div id="link1" style="background-color:#CCCC66"><p>link1</p></div>
<div id="link2">link2</div>
<div id="link3">link3</div>
<div id="link4">link4</div>
<!--<button onclick="positioning_width_other()">pos other</button>-->
<br />
<br />
<br />
<br />
<div id="innerbox"><p align="center">Box</p></div>
<div id="innerbox2"><p align="center">Box2</p></div>
<div id="innerbox3"><p align="center">Box3</p></div>
<div id="innerbox4"><p align="center">Box4</p></div>
</div>
</body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: CSS centering a page

Thread Tools

Display

CSS centering a page

Bookmarks

Bookmarks

Posting Permissions