Almost all the css layout frameworks and artcles that I have encountered seem to rely only on the DIV tag to accomplish the task. Here I present a css layout technique that is inspired by the TABLE tag where I use DIV and SPAN tags similar to the TR and TD tags.
Here are two progressive examples:
Example #1:
<html>
<head><title>An Intuitive CSS Layout Technique</title></head>
<body style="margin: 0px;padding: 0px; font-style: courier">
<div style="width: 100%;height: 100%">
<div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
Header
</div>
<div style="float: left; width: 100%;height: 70%">
<span style="float: left; width: 15%; height: 100%;background-">
LeftNav
</span>
<span style="float: left;width: 70%;height: 100%;">
Content panel #1
</span>
<span style="float: right; width: 15%; height: 100%;background-">
RightNav
</span>
</div>
<div style="float: left; width: 100%; height: 15%;background-color:#98AFC7;">
Footer
</div>
</div>
</body>
</html>
which produces this display:
Example #2:
<html>
<head><title>An Intuitive CSS Layout Technique</title></head>
<body style="margin: 0px;padding: 0px; font-style: courier">
<div style="width: 100%;height: 100%">
<div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
Header
</div>
<div style="float: left; width: 100%;height: 70%">
<span style="float: left; width: 15%; height: 100%;background-">
LeftNav
</span>
<span style="float: left;width: 70%;height: 100%;background-">
<span style="float: left;width: 70%;height: 100%;background-">
<div style="width: 100%;height: 80%;background-color:white;">
Cell 4
</div>
<div style="width: 100%;height: 20%;background-color:green;">
Cell 5
</div>
</span>
<span style="float: left;width: 30%;height: 60%;background-">
<div style="width: 100%;height: 40%;background-color:white;">
Cell 6
</div>
<div style="width: 100%;height: 60%;background-color:green;">
Cell 7
</div>
</span>
</span>
<span style="float: right; width: 15%; height: 100%;background-">
RightNav
</span>
</div>
<div style="float: left; width: 100%; height: 15%;background-color:#98AFC7;">
Footer
</div>
</div>
</body>
</html>
which produces this display:
Home
