"William Tasso" <ne****@tbdata.com> wrote in message
news:bm************@ID-139074.news.uni-berlin.de...
Robert P. Stearns wrote: I have been trying to convert the following simple table into CSS.
<table>
<tr><th colspan=2>Header Area</th></tr>
<tr><th>Navigation Area</th><th>Information Area</th></tr>
<tr><th colspan=2>Footer Area</th></tr>
</table>
...
simple two column layout + header and footer
http://williamtasso.com/usenet/two-cols.html
add content and styles to taste, bring to the boil and simmer till tender.
serve in any browser.
--
William Tasso - http://WilliamTasso.com
Is there a way to extend or heighten the information area to match the total
height of the navigation and scroller area?
<html>
<head>
<title>CSS Sample</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<style>
<!--
div.document { width: 100%; text-align: center; background-color: khaki;
border: 1px solid black; padding: 20px }
div.header { width: 100%; text-align: center; background-color: pink;
border: 1px solid black; margin-top: 10px; padding: 20px }
div.body { width: 100%; text-align: center; background-color: lightgreen;
border: 1px solid black; margin-top: 10px; padding: 20px }
div.navigation { width: 28%; text-align: center; background-color: tan;
float: left;
border: 1px solid black; margin-top: 10px; padding: 10px }
div.scroller { width: 28%; text-align: center; background-color: red; float:
left; clear:
both; border: 1px solid black; margin-top: 10px; padding: 10px }
div.information { width: 70%; text-align: center; background-color:
lightblue; float: right;
border: 1px solid black; margin-top: 10px; padding: 30px }
div.footer { width: 100%; text-align: center; background-color: yellow;
clear: both;
border: 1px solid black; margin-top: 10px; padding: 30px }
//-->
</style>
</head>
<body>
<div class="document">
Document Area
<p>div.document { width: 100%; text-align: left; background-color: khaki;
border: 1px solid black; padding: 20px }</p>
<div class="header">
Header Area
<p>div.header { width: 100%; text-align: center; background-color: pink;
border: 1px solid black; margin-top: 10px; padding: 20px }</p>
</div>
<div class="body">
Body Area
<p>div.body { width: 100%; text-align: left; background-color: lightgreen;
border: 1px solid black; margin-top: 10px; padding: 20px }</p>
<div class="navigation">
Navigation Area
<p>div.navigation { width: 28%; text-align: center; background-color: tan;
float: left; border: 1px solid black; margin-top: 10px; padding: 10px }</p>
</div>
<div class="information">
Information Area
<p>div.information { width: 70%; text-align: center; background-color:
lightblue; float: right; border: 1px solid black; margin-top: 10px;
padding: 30px }</p>
</div>
<div class="scroller">
Scroller Area
<p>div.scroller { width: 28%; text-align: center; background-color: red;
float: left; clear: both; border: 1px solid black; margin-top: 10px;
padding: 10px }</p>
</div>
</div>
<div class="footer">
Footer Area
<p>div.footer { width: 100%; text-align: center; background-color: yellow;
clear: both; border: 1px solid black; margin-top: 10px; padding: 30px }</p>
</div>
</div>
</body>
</html>