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

confusticate at gmail.com confusticate at gmail.com
Fri Jul 22 09:45:10 CDT 2011


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