Re: Converting Centered Table Rows to Divs/CSS

Thanks for the many links, David, but I've visited each of these sites
(extensively), and they don't speak to the problem I'm having... I've also
surfed as many CSS-based websites as I could find, and not ONE of them does
what I'm looking for using CSS - I did find many embedding tables into their
CSS to achieve this affect.  My goal is to elminate tables (as used for
element positioning) entirely.

I know how to put up three columns using divs and CSS (in fact, I'm using
the bluerobot layout3 sample as the basis for a new website as I write
this).  I know how to span a top title bar across all columns, and how to
include a bottom bar spanning all three columns.  I even know how to make
the  whole magilla expand and  contract with the browser window without
breaking it all apart (until the window gets impractically narrow, anyway).
It took me a while to sort it all out, but I finally started to see the
light.

What I don't know how to do is to put, for example, five elements in a
single row in that bottom bar, evenly spaced across it, so that when the
window is expanded or contracted, they stay (as a group of five elements)
centered within the window and self-adjust the distances between themselves
and the window borders.  The sort of thing that, using a centered table of
five cells in one row, is basic HTML.

I started with five divs, but they're block elements, and want to be stacked
in a column.  I couldn't figure out how to force them to stay inline
(display:inline didn't do it), so I went with spans within an enveloping
div, as follows:

<div id="navfooter">
<span class="footer"><a href="1990">1990</a></span>
<span class="footer"><a href="1991">1991</a></span>
<span class="footer"><a href="1992">1992</a></span>
<span class="footer"><a href="1993">1993</a></span>
<span class="footer"><a href="1994">1994</a></span>
</div>

.footer {
 padding:2px 6px 2px 6px;
 margin:2px 2px 2px 2px;
 border:0px solid black;
 width:auto;
text-align:center;
 }

#navfooter {
    position:relative;
    top:10px;
    padding:4px 0px 4px 0px;
    margin:4px 4px 1px 4px;
    border:0px dotted black;
    text-align:center;
    width:auto;
    z-index:2;
    voice-family: "\"}\"";
    voice-family:inherit;
    top:-10px;
 }
html body>#navfooter {top:-10px;}

[ I realize I have some superfluous declarations in both .footer and
#navfooter - I'm using them to troubleshoot problems for now, and will be
remove or abbreviate them later. ]

This gives me a screen-centered, single-row of spaced elements - but their
spacing is dependent on the CSS padding and margin declarations, and does
not vary regardless how expanded the browser window gets. This is similar to
using a table with fixed-width cells and a fixed overall row width.

I'd like these elements to space themselves out according to window width,
without having to use absolute positioning and javascript to provide
position values. Surely CSS can provide an equivalent to such a basic tables
design - but I don't seem to be able to dope it out.  Or am I missing some
important aspect of CSS that would make this implementation undesireable?

I hope this expresses my problem more specifically - sorry for the length of
the message.  And Thanks Again!! for any suggestions you may have.

Rod
rbhutson(at)ieee.org

----- Original Message -----
From: "davida51" <davida51(at)swbell.net>
To: "Rod Hutson" <rbhutson(at)ieee.org>
Cc: <hwg-style(at)hwg.org>
Sent: Saturday, January 19, 2002 1:26 PM
Subject: Re: Converting Centered Table Rows to Divs/CSS


> Rod Hutson wrote:
>
> > .... how do you convert a centered, single table row of nicely spaced
cells
> > into a set of inline divs in a CSS page?....
>
> Rod -
>
> You can find info here also
> http://bluerobot.com/web/layouts/layout3.html
> --
> David Andrew
> davida51(at)swbell.net

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA