 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / August 2004Centering two floated tables (old question, I'm sure)
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!  Signaturelkseitz (Lee K. Seitz) .at. hiwaay @dot@ net BBS flashback: * SLMR 2.1a * Back Up My Hard Drive? I Can't Find The Reverse Switch! > I'm redesigning this page for more up-to-date browser standards: > <http://home.hiwaay.net/~lkseitz/hhs/winners.shtml>. Note the use of [quoted text clipped - 9 lines] > 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 >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! Signaturelkseitz (Lee K. Seitz) .at. hiwaay @dot@ net It was just a Fig Newton of your imagination. > I've recreated the basic look and technique of the original page now > at <http://home.hiwaay.net/~lkseitz/hhs/winners_old.shtml>. The [quoted text clipped - 10 lines] > 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/visuren.html#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 |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.