Ib Jensen wrote:
> The "template" should fill a total of 90% of the viewport / screen.
> I want the header and footer in the "template" to fill 90% of the
> viewport / screen.
> The left- and content-column in the "template" should only fill 80% of
> the viewport / screen.
> I don't know if this clears something.
If you don't care about IE, or you're not using full-height column
backgrounds, you can get away with this:
~~~
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>%TITLE%</title>
<meta http-equiv='content-type'
content='text/html;charset=utf-8'>
<style type='text/css'>
#page-frame,#core-panel
{width:90%;margin:0 auto}
#head-frame,#core-frame,#foot-frame
{display:table;margin:0 auto}
#head-frame,#foot-frame
{width:90%}
#core-frame
{width:80%}
#head-panel,#core-panel,#foot-panel
{display:table-row}
#header,#menu,#main,#footer
{display:table-cell;vertical-align:top}
#head-panel,#foot-panel
{background:#ccc;width:100%}
#menu
{background:#bbb;width:20%}
#main
{background:#ddd;width:80%}
/* Faking display:table-cell for IE as best we can */
#menu,#main
{display:inline-block!ie}
#menu,#main
{display:inline!ie}
</style>
</head>
<body id='www-css_sig-tld'>
<div id='page-frame'>
<div id='head-frame'>
<div id='head-panel'>
<div id='header'>
<p>%HEADER%</p>
</div>
</div>
</div>
<div id='core-frame'>
<div id='core-panel'>
<div id='menu'>
<p>%MENU%</p>
<p>%MENU%</p>
</div>
<div id='main'>
<p>%MAIN%</p>
</div>
</div>
</div>
<div id='foot-frame'>
<div id='foot-panel'>
<div id='footer'>
<p>%FOOTER%</p>
</div>
</div>
</div>
</div>
</body>
</html>
~~~
Hope it helps.
--Bill
--
<!--
! Bill Brown <macnim...@gmail.com>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
