[thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS?

Geoff Sheridan retrocool at gmail.com
Fri Jul 22 10:18:27 CDT 2011


Make a 500px wide 1px tall #C2E0F8-coloured png and put it as the background, 
centered and repeating-y, on the body. That way it will 'stretch' as you require.

Geoff

On 22/07/2011 15:45, confusticate at gmail.com wrote:
> Hey list,
>
> Here it is, one of the simplest table layouts I could ever imagine doing.
> And yet, here I am scratching my head over how to do this *without* tables.
> Who will take on the challenge??
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>Table layout</title>
> <style type="text/css">
> html, body {
>      height: 100%;
>      padding:0;
>      margin:0;
>      text-align:center;
> }
> table {
>      margin-left:auto;
>      margin-right:auto;
> }
> td {
>      text-align:left;
>      vertical-align: top;
> }
> </style>
> </head>
> <body>
> <table width="500" height="100%" border="0" cellpadding="0" cellspacing="0">
>      <tr>
>          <td bgcolor="#E0F5DC" height="25"><p>Header here</p></td>
>      </tr>
>      <tr>
>          <td bgcolor="#C2E0F8">
>              <p>Content would go in here. If there isn't enough content to
> fill the screen, this blue section should still stretch to the bottom of the
> window. If there are scrollbars however, the blue section should stretch to
> the bottom of the content.</p>
>              <p>Content would go in here. If there isn't enough content to
> fill the screen, this blue section should still stretch to the bottom of the
> window. If there are scrollbars however, the blue section should stretch to
> the bottom of the content.</p>
>              <p>Content would go in here. If there isn't enough content to
> fill the screen, this blue section should still stretch to the bottom of the
> window. If there are scrollbars however, the blue section should stretch to
> the bottom of the content.</p>
>          </td>
>      </tr>
> </table>
> </body>
> </html>
>
>
> The prize will be glory and my eternal gratitude!
>
> Cheers,
> CB.



More information about the thelist mailing list