Welcome to WebmasterWorld Guest from 54.161.110.186

Forum Moderators: not2easy

Message Too Old, No Replies

Simple CSS question

centering a page

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

10+ Year Member



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?
7:09 am on Aug 18, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.


<HTML>
<HEAD>

<style>
#container {width:100%;text-align:center}
#pageitself {width:580px;text-align:left}
</style>

</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.

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

10+ Year Member



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"><!--
if (window.innerWidth) {
var maxwid = 750
var wid = (window.innerWidth - 32)
var marg = (((wid-maxwid)/2)-(((wid-maxwid)%2)/2));
if (marg>0) {
document.write('<STYLE TYPE="text/css">\n');
document.write('.main \{\n');
document.write('margin-left: ');
document.write(marg);
document.write('px;\nmargin-right: ');
document.write(marg);
document.write('px;\n\}');
document.write('<');
document.write('/STYLE>')
}
}
// --></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.

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

10+ Year Member



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;'>
<!-- text here is left justified and centered with 10% margins each side -->
</div>
</div>

Hope that helps.
Alex

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

WebmasterWorld Senior Member 10+ Year Member



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

<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">

Your page goes in another table here....

<td>
</tr>
</table>

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month