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 <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/