Simple CSS question

Forum Moderators: not2easy

Message Too Old, No Replies

Simple CSS question

centering a page

JakeFrederick

2:07 am on Aug 18, 2001 (gmt 0)

How can I center an entire page and keep it's formatting with CSS? My idea was to nest everything in a <div> element with some sort of centering property. Maybe I just didn't look hard enough but I couldn't find one. Is there a better way?

tedster

7:09 am on Aug 18, 2001 (gmt 0)

This apparently simple thing has confounded me also, Jake. It sounds like your approach ought to work — use text-align:center to center a nested div, and then declare text-align:left for that nested div, in order to override the centering of elements that would be inherited from the outer div.

But it only works in Explorer, and not even Opera.

</HEAD>
<BODY>

<div id="container">
<div id="pageitself">This is the page we want to be centered.</div>
</div>

</BODY>
</HTML>

The old, deprecated <CENTER> tag was simple and elegant for this kind of functioning. In Opera and Netscape 6 th e <center> tag will still center a div on the page, even though it's now deprecated. But not in Netscape 4.x! No method I can find will center an entire div in Netscape 4.x.

My guess is that tables are still required to get this centering effect with the current browser situation. I'd sure love to hear differently.

EX_S

11:32 am on Aug 18, 2001 (gmt 0)

Here's one method I used to use when I wanted the page to be 750 pixels wide, without putting the whole lot in a table. Basically, it uses JavaScript to measure the window's inner width, and then sets CSS margins accordingly.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"></SCRIPT>

It has it's limitations, namely the browser must support JS with the innerWidth object as well have support for margin-left and margin-right CSS. And the margins remain when the window is resized. But maybe this will give someone some ideas and inspire them to make an improved version of it.

alexjc

9:21 pm on Aug 18, 2001 (gmt 0)

The horrible thing is that <center> is depreciated in HTML 4. Replacing it does seem overly tedious, especially with respect to browser compatibility.

One thing that should work for every CSS compliant browser:

margin-left: auto;
margin-right: auto;
width: 80%;

But it seems only the Opera designers fully read the CSS spec ;)

In IE, you'll have to do something like:

<div style='text-align: center; width: 80%;'>
<div style='text-align: left;'>

</div>
</div>

Hope that helps.
Alex

joshie76

3:40 pm on Aug 23, 2001 (gmt 0)

Why not use tables (or am I missing the point) - this can even be used to centre vertically and works in all browsers I've tested. Be sure to set your page margins to zero for vertical centering

Your page goes in another table here....

Eric_Jarvis

4:43 pm on Aug 23, 2001 (gmt 0)

yep...you are missing part of the point...the great thing about css is that you can get rid of a lot of the clutter from your pages...making them more SE friendly, more accessible for text to speech browsers etc...layout by tables is exactly the sort of stuff I went over to css to get rid of

there are also a number of rendering problems associated with pages entirely created within a table

mivox

4:56 pm on Aug 23, 2001 (gmt 0)

a number of rendering problems associated with pages entirely created within a table

But centering your content wasn't one of them... ;) CSS/browser compatibility has a few glaring holes, and the incredibly poor support for centering anything is one of them.

alexjc

10:35 pm on Aug 23, 2001 (gmt 0)

I was reading the specs again, and they keep mentionning that div tags are ideal to replace tedious table based formatting... it's a nice theory, but div's don't really do well with explicit positioning!

Try getting a div box in the top left (say a logo), and another div filling the rest of the top right. Tables do that nicely, but this is a whole new ball game!

Floating div's bother me too... in most browsers, the floating divs can overflow their parent's boundaries. Anyway, i'm rambling now.