How to center a page without use of a table

pdk · #1 Jan 21st, 2007, 07:04

hi, I'm sort of an off-and-on designer who does small pages mainly for friends and family, but I'm sort of learning CSS. I've got something started at

http://pdk.lolmaha.com/design

but I can't for the life of me figure out how to center it without the use of a table OR a container div as I've done in this.

if someone could tell me what i'm doing, it would be greatly appreciated

Lchad · #2 Jan 21st, 2007, 12:15

Links not working so can't see your code!

ukgeoff · #3 Jan 21st, 2007, 14:05

Your combination of css styling code and the use of a container div is just fine.

Get into the habit of placing your css in a seperate file and <link... it into your pages.

Ryan Fait · #4 Jan 21st, 2007, 19:03

Something has to be fixed width, but you can add margin: 0 auto; to an element.

karinne · #5 Jan 22nd, 2007, 13:18

How to center your site horizontally

moojoo · #6 Jan 22nd, 2007, 15:18

also text-align:center; the body and text-align:left; your container. IE7 doesn't seem to like margin:0 auto;

karinne · #7 Jan 22nd, 2007, 17:05

Quote:

Originally Posted by moojoo

also text-align:center; the body and text-align:left; your container. IE7 doesn't seem to like margin:0 auto;

Hmm ... that's news to me ... I'm pretty sure only IE5 and IE5.5 possibly are the only ones that need the text-align:center; ... if you look at my portfolio site in IE7, it centers correctly and I don't have the text-align:center; anywhere in there.

Ryan Fait · #8 Jan 22nd, 2007, 18:03

I heard that too, perhaps it was on one of the beta versions?

barry · #9 Jan 22nd, 2007, 19:02

quick reply to you dude

use margin-left:auto;
and margin-right:auto to centre your divs

moojoo · #10 Jan 22nd, 2007, 19:05

margin:0 auto is less code and works the same

Quote:

Originally Posted by barry

quick reply to you dude

use margin-left:auto;
and margin-right:auto to centre your divs

moojoo · #11 Jan 22nd, 2007, 19:06

I test in IE 7 under Parallels and on IE 7 at work both XP Pro. Neither one supports it for me, perhaps I just need to update it. Will run sw update at home and see.

Quote:

Originally Posted by Ryan Fait

I heard that too, perhaps it was on one of the beta versions?

Ryan Fait · #12 Jan 22nd, 2007, 22:37

Yep, that's good to know!

karinne · #13 Jan 23rd, 2007, 00:26

The code I posted in my first reply, you'll notice I don't have the text-align: center in the body { }. Only margin: 0 auto; and a width in the #wrap.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    body {
        color: #fff;
    }
    
    #wrap {
        margin: 0 auto;
        width: 780px;
        background-color: #900;
    }
    </style>
</head>

<body>

<div id="wrap">
    this box is centered
</div>

</body>
</html>

This works in FF2, Opera 9 and IE6 and IE7.

You can test it here.

moojoo · #14 Jan 23rd, 2007, 15:30

Yes centering only works with a width value specified. Good point =P.

pdk · #15 Jan 30th, 2007, 20:56

Okay, so I've solved that problem. How do I make column1 and column2 the same length no matter what?

Ryan Fait · #16 Jan 30th, 2007, 21:01

Unforunately you can't.

moojoo · #17 Jan 30th, 2007, 21:02

A bit of stuff I noticed:

Change this code:

Code: Select all


<P>HEADERHEADERHEADER
<P>HEADERHEADERHEADER
</div>            
<div id='column1'>
<li><a href='POKER'>OMAHA</a></li>
<li><a href='POKER'>STUD</a></li>
<li><a href='POKER'>LEE JONES</a></li>
<li><a href='POKER'>TEXAS FOLD THEM</a></li>
<li><a href='POKER'>POKER</a></li>
</div>
<div id='column2'>
this for news 
</div>
<div id='footer'>
this the footer
</div>

to:

Code: Select all


<h1>HEADERHEADERHEADER</h1>
<h1>HEADERHEADERHEADER</h1>
</div>            
<div id="column1">
<ul>
<li><a href="POKER">OMAHA</a></li>
<li><a href="POKER">STUD</a></li>
<li><a href="POKER">LEE JONES</a></li>
<li><a href="POKER">TEXAS FOLD THEM</a></li>
<li><a href="POKER">POKER</a></li>
</ul>
</div>
<!-- end column1 -->
<div id="column2">
<p>this for news</p>
</div>
<!-- end column2 -->
<div id="footer">
<p>this the footer</p>
</div>
<!-- end footer -->

moojoo · #18 Jan 30th, 2007, 21:06

Quote:

Originally Posted by Ryan Fait

Unforunately you can't.

Well you can in ways..

1. Simulate the columns by using a background image repeating on the y axis of your container so a border whatever appears the entire height of the containing div or even on the body. Called "Faux Columns".

2. Specify them both the same height and use the over flow auto property

3. Give both the same amount of content

4. (This one is not recommended) use javascript to control them.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How to center a page without use of a table