CSS Forum

**Harvey** · 02-25-2006, 03:26 PM

I've never really used "tableless CSS", although I've had quite a bit of experience with general CSS & PHP.

For a new site, I'd like to have a box, in the centre of the page. Simple enough, but can't work out how to achieve this!

No more tables & linespaces for me

**benjo** · 02-25-2006, 10:36 PM

Your Q is a bit generalised in nature and it seems like you may have to go way back to the start of it all and learn the basics. But if a box is all you want then try this.
!!!note this is in no way the only way to "put a box in the centre of a page", just thought this may be the closest thing your after.

Code:

<html>

<head>

<title>Box demo</title>

<style type="text/css">

#box {
    position:absolute;
    border:solid black 1px;
    top:25%;
    right:25%;
    bottom:25%;
    left:25%;
    padding:25px;
    margin:25px;
    }

</style>

</head>

<body>

<div id="box">

<p>Here is a box in the middle of the page, even if you adjust the size of your browser.</p>

</div>

</body>

</html>

Good luck and check out some tutes when you get a chance.
Benjo

**vangogh** · 02-25-2006, 11:35 PM

Harvey, there's a lot fo different ways to acheive what you're looking for. Have you started coding the page and if so could you post the code or a link to it? If you haven't started do you have an image that shows the basic look you want?

You'll probably want to use positioning in some way, but the details will depend a little on how you want the rest of the page set up.

**Harvey** · 04:30 PM

Thanks for your reply.

Yup, of course there are plenty of ways to put a box in the middle of the page - it's just I've never used tableless CSS before and thought it'd be a good time to start.

I've just found a great resource, which tells me exactly what I needed to know. Recommended for those who are also making the leap from tables to tableless CSS!

http://intensivstation.ch/en/templates/

**Harvey** · 02-26-2006, 05:30 PM

Alright this is really annoying me now.

I want it to have a width of 720px.
And a height of 420px.

It needs to be centered, so there's equal space on left as there is right. And equal space on top as there is on bottom.

Obviously I want to achieve it using CSS - not something as pointless and dodgy as "<p> </p>"'s!!!

But hey, here's the index page:

HTML Code:

<link href="styles.css" rel="stylesheet" type="text/css">
  <p>&nbsp;</p>
    <p>&nbsp;</p>
  <p>&nbsp;</p>
<div id="content">
  <p>&nbsp;</p>
</div>

And the CSS page:

Code:

body {
  background-color: #E0E9EF;
  font-size: 12px;
  color:#564b47;  
  padding:20px;
  margin:0px;
  text-align: center;
}


#content { 	
  text-align: left;
  vertical-align: middle;	
  margin: 0px auto;
  padding: 0px;
  height: 420px;
  background-color: #ffffff;
  width: 720px;
  border: 1px dashed #564b47;
}

Please help!

**vangogh** · 02:55 AM

To center things I usually wrap everything to be centered center in a div and then add css like the following:

div#center {width:720px; margin:0 auto}

That will center everthing horizontlly on the page. I've never actually tried to center things vertically, but I think if you add the height and then just have margin: auto instead of margin:0 auto it would work. I think I usually also add position:relative to the div, though I don't think it's necessary. I think I'm also doing other things with it requiring some kind of positioning, but it's something to try if it's not working.

By the way the template resource looks pretty good. Thanks for the link.

**chrishirst** · 02-27-2006, 05:13 AM

closest I could get to vertical centring is by using a % for the top margin.

http://www.candsdesign.co.uk/page-te...tre/layout.asp

**vangogh** · 02-27-2006, 04:06 PM

I guess margin: auto doesn't work for vertical centering then. I'll keep the percent option in mind if I need it in the future.