Ah, never mind. I missed the vertical align part of your problem. Tom's example seemed like a good one though.
:-) -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Janelle Clemens Sent: Thursday, September 08, 2005 4:21 PM To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] Tables - a challenge! Try this. This gives you a box centered in the browser with a width of 650px. Does this help? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"> <head> <title>Template</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="" /> <style type="text/css"> <!-- body { font-size: 1.0em; font-family: verdana, arial, sans-serif; color: #5C5C5C; margin-top: 0px; text-align: center; } #container { margin-top: 4px; margin-left: auto; margin-right: auto; width: 650px; min-height: 450px; border: 1px solid #8F8F99; } --> </style> </head> <body> <div id="container"> This is some text </div> </body> </html> -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of designer Sent: Wednesday, September 07, 2005 1:10 PM To: web Subject: [WSG] Tables - a challenge! Hello all, I've been holding back with this, as I've said it before and I can hear the yawns from some of the longer suffering members . . . OK, I don't use tables, except for tabular data. I've been doing this standards stuff for for just one year and there is only one place where I use a table for layout, and that is to put something (div, or whatever) slap bang in the middle of the screen, both vertically and horizontally. There are many ways to do this, but none of them (that I know) are as simple or as reliable as this method using a single-cell table: CSS: body, html { height : 100%; } #layoutgrid{ height : 100%; width : 100%; } #layoutgrid td { vertical-align : middle; text-align : center; } Then, in the body: <table id="layoutgrid"> <tr> <td > This is in the middle! </td> </tr> </table> Other methods use javascript, others use negative margins. The negative margins way is neat, but it suffers from the fact that, if the viewport is smaller than the thing you are centering [eg, content height is 500px and you have a screen that is only 640 by 480] you cannot see the top of the content, and (obviously) you can't scroll there! So, the challenge: do what I've done above with no table, AND make it work in IE. It's easy if you forget IE (see 1), but since IE is still the primary browser in use that isn't a solution. [1. see Steve Clay: http://mrclay.org/web_design/vertical_centering_by_the_specs.html ] Anyone? Bob McClelland www.gwelanmor-internet.co.uk ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ______________________________________________________________________ This email has been scanned by the MessageLabs Email Security System. For more information please visit http://www.messagelabs.com/email ______________________________________________________________________ ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
