Centering two floated tables (old question, I'm sure)

[Lee K. Seitz]

I'm redesigning this page for more up-to-date browser standards:
<http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>. Note the use of
an "invisible" table to position the "visible" ones. I'm attempting
to get a similar layout using CSS. So far the best I've come up with
is <http://home.hiwaay.net/~lkseitz/hhs2/winners.shtml>. (CSS at
<http://home.hiwaay.net/~lkseitz/hhs2/hhs.css>.)

The problems (all Windows):
1. In IE 6 and NN 7, the top two tables appear one below the other
instead of side-by-side.
2. In Opera 7.5, the top two tables appear side by side, but float
left instead of being centered. At least I can understand this
behavior. IE & NN's behavior baffles me.

Any clue how to get to top two tables side-by-side and centered? Or
shall I give up and not have any tables side-by-side? I'm sure this
is one of those things that comes up often, but I was unable to find
the relevent past posts after a brief search. Thanks!

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
BBS flashback:
* SLMR 2.1a * Back Up My Hard Drive? I Can't Find The Reverse Switch!

[boclair]

<lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net> wrote in message
news:10*************@corp.supernews.com...

I'm redesigning this page for more up-to-date browser standards:
<http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>. Note the use of
an "invisible" table to position the "visible" ones. I'm attempting
to get a similar layout using CSS. So far the best I've come up with
is <http://home.hiwaay.net/~lkseitz/hhs2/winners.shtml>. (CSS at
<http://home.hiwaay.net/~lkseitz/hhs2/hhs.css>.)

The problems (all Windows):
1. In IE 6 and NN 7, the top two tables appear one below the other
instead of side-by-side.
2. In Opera 7.5, the top two tables appear side by side, but float
left instead of being centered. At least I can understand this
behavior. IE & NN's behavior baffles me.

Your hhs2 directory cannot be reached but perhaps

declare widths on the floated elements.

To center, float one table left and the other right in a centered containing
div.

Louise

[Lee K. Seitz]

In article <2p************@uni-berlin.de>,
boclair <bo*****@bigpond.net.au> wrote:

Your hhs2 directory cannot be reached
Sorry. I was able to get my site rework done much faster than I
thought, so I went ahead and made it live late last night. I forgot
that it would mess up people trying to help me here until it was too
late.

I've recreated the basic look and technique of the original page now
at <http://home.hiwaay.net/~lkseitz/hhs/winners_old.shtml>. The
version I'm trying to get to work is now where it used to be,
<http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>.
but perhaps declare widths on the floated elements.

To center, float one table left and the other right in a centered containing
div.

Not quite, but you led me down the right path. The secret is to
declare a width for the centered div containing the two floated divs.
It's still not perfect in NN and Opera, but close enough for my very
limited audience. Thanks!

--
lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net
It was just a Fig Newton of your imagination.

[boclair]

<lkseitz (Lee K. Seitz) .at. hiwaay @dot@ net> wrote in message
news:10*************@corp.supernews.com...

In article <2p************@uni-berlin.de>,
boclair <bo*****@bigpond.net.au> wrote: I've recreated the basic look and technique of the original page now
at <http://home.hiwaay.net/~lkseitz/hhs/winners_old.shtml>. The
version I'm trying to get to work is now where it used to be,
<http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>.

but perhaps declare widths on the floated elements.

To center, float one table left and the other right in a centered containingdiv.

Not quite, but you led me down the right path. The secret is to
declare a width for the centered div containing the two floated divs.
It's still not perfect in NN and Opera, but close enough for my very
limited audience. Thanks!

Sorry but that is not the secret as the Netscape and Opera renderings are
showing. The secret is contained in

"A floated box must have an explicit width (assigned via the 'width'
property, or its intrinsic width in the case of replaced elements). Any
floated box becomes a block box that is shifted to the left or right until
its outer edge touches the containing block edge or the outer edge of
another float. The top of the floated box is aligned with the top of the
current line box (or bottom of the preceding block box if no line box
exists). If there isn't enough horizontal room on the current line for the
float, it is shifted downward, line by line, until a line has room for it."

vide http://www.w3.org/TR/REC-CSS2/visure...float-position

Assuming the containing div is width enough, the answer lies in declaring
widths on both floating elements, even if it is 50% of the containing div
width to each.

Louise