Ib Jensen wrote:
> I want a 2 column design with header and footer, a left nav- and
> info-column, and a right content-column. Centered.
> Header and footer : 90%
> These two columns together: 80%
> Left column: 20-25%
> Content column : 80-75%
> How do I change these measurements to: em
Use ems...and a calculator. Relying on the browser to calculate the
percentage is sketchy at best. You probably want something like 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'>
#head-frame,#main-frame,#menu-frame,#foot-frame {
padding: 1px 0; /* Fix margin collapsing */
}
#page-shell {
margin: 0 auto;
width: 80em;
}
#head-frame, #foot-frame {
background: #dedede;
margin: 0 auto;
width: 72em; /* 90% of 80em */
}
#page-frame {
background: #999;
margin: 0 auto;
width: 64em; /* 80% of 80em */
}
#page-panel {
background: #ccc;
margin-left: 16em; /* Same as #menu-frame width */
}
#main-frame {
float: right;
width: 48em; /* 75% of 64em */
}
#menu-frame {
display: inline; /* Fix IE double-margin bug */
float: left;
margin-left: -16em; /* Width x -1 */
width: 16em; /* 25% of 64em */
}
/* FLOAT BEHAVIOR SWITCH FOR STANDARDS COMPLIANT BROWSERS */
#page-panel:after {
clear: both;
content: ".";
display: block;
font-size: 1px;
height: 0;
line-height: 0;
overflow: hidden;
visibility: hidden;
}
/* FLOAT BEHAVIOR SWITCH FOR IE */
#page-panel {
display: inline-block;
}
#page-panel {
display: block;
position: relative;
}
</style>
</head>
<body id='www-css_sig-tld'>
<div id='page-shell'>
<div id='head-frame'>
<p>%HEAD%</p>
</div>
<div id='page-frame'>
<div id='page-panel'>
<div id='main-frame'>
<p>%MAIN%</p>
<p>%MAIN%</p>
<p>%MAIN%</p>
</div>
<div id='menu-frame'>
<p>%MENU%</p>
<p>%MENU%</p>
<p>%MENU%</p>
<p>%MENU%</p>
<p>%MENU%</p>
</div>
</div>
</div>
<div id='foot-frame'>
<p>%FOOT%</p>
</div>
</div>
</body>
</html>
~~~
Hope it helps.
--Bill
--
<!--
! Bill Brown <[email protected]>
! Web Developologist, WebDevelopedia.com
-->
______________________________________________________________________
css-discuss [[email protected]]
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/
