Hi generalhavok,
I'm back to report the results of my weekend efforts.
First, this screenshot
http://www.greatchurchwebsites.org/art/css_test2.jpg
demonstrates that specifying a margin of "auto," as you suggested, does work for centering things horizontally. (I am referring to the white block and all that it contains.) Thanks!
The code is here:
******************************
<head>
<style type="text/css">
<!--
.fullpageContainer {
margin: 0px auto;
background-color: lightgreen;
}
.contentsContainer {
width:500px;
margin: 0px auto;
padding:12px;
background-color: white;
}
.header {
background-color: yellow;
}
.content1 {
background-color: #FFE099;
width:150px;
}
.content2 {
background-color: #FFC133;
width:200px;
}
.content3 {
background-color: #C2D8F2;
width:150px;
}
.footer {
background-color: #FF7733;
}
-->
</style>
</head>
<body>
<div class="fullpageContainer">Full width of browser
<div class="contentsContainer">Actual contents, centered in browser
<div class="header">Header (full width of actual contents)</div>
<div id="WhatFollowsShouldBeARow">
<div class="content1">Lefthand column</div>
<div class="content2">Middle column</div>
<div class="content3">Righthand column</div>
</div>
<div class="footer">Footer (full width of actual contents)</div>
</div>
</div>
******************************
(By the way, the "id" attribute, which you used in your suggested code, didn't work for me. I find that I have to use "class" instead.)
However, the screen shot demonstrates another problem. It seems to me that closing </div> tags contain a built-in return, so to speak. So, a browser does not understand that what I want here
<div id="WhatFollowsShouldBeARow">
<div class="content1">Lefthand column</div>
<div class="content2">Middle column</div>
<div class="content3">Righthand column</div>
</div>
is three columns, arranged horizontally left to right, and so by default arranges them vertically, one after the other.
By contrast, a browser understands that
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
is to be horizontally arranged as three columns, left to right. Further, while I can specify a specific width for one or more of the columns (in tables), if I don't, the browser will automatically spread the available horizontal space among the three columns, taking into account the width of the contents of the three cells. This is often exactly what is needed.
How, then, can a browser distinguish <div>'s that are supposed to be vertically arranged, one after the other, from those that are supposed to be horizontally arranged, when the same tag is used for both? One obvious answer is to use CSS attributes in some way to do this, but if this takes more work than using a table row and cells, I'll stick to using tables.
It appears to me, from my experiments, that one needs to use the <span> tag instead of the <div> tag if he or she wants three columns arranged left to right, like this:
<div id="WhatFollowsShouldBeARow">
<span class="content1">Lefthand column</div>
<span class="content2">Middle column</div>
<span class="content3">Righthand column</div>
</div>
which results in this test page:
http://www.greatchurchwebsites.org/art/css_test3.jpg
However, the three cells or spans are the same width, and, further, as a group are flush left. I needed them to fill out the available space, left to right, however, taking into account (as table cells do) the actual content of the spans. How can I do this? You'll see the problem in my re-working of my index page, to remove table positioning and replace it with CSS positioning:
http://www.greatchurchwebsites.org/index_css.php
(Note position of navigational links under banner.)
In general, my trial effort to replace table positioning in my home page with CSS positioning went well, although it was trickier than I thought it would be. That was the result of my deciding to get rid of certain kludges (table workarounds). As you can see, while there remains a few major challenges to overcome, the layout looks better overall because I can do some things using CSS that I can't using tables (no surprise to you, of course).
The remaining problems:
As introduced above, how to get the navigational links in the banner to be equally spaced horizontally (after the "Home" link, which needs to be and currently is centered over the lefthand column).
How to get the navigational links to be centered vertically. The "auto" trick you suggested for centering elements horizontally doesn't appear to work vertically.
Obviously, the body or text of the page should be beside the lefthand column, and not below it as is the current case. That's not happening. It should ? I just don't know why at this point.
Thanks again for your help and suggestions thus far.
(The Zen Garden site you suggested has been cited before elsewhere on this forum. It is, indeed, a very cool site.)
Sincerely,
David Gillaspey
President
Great Church Websites