prettify

baseline

Table Layout for web pages

You should never use tables for layout. You should use div. Having said that and having spent some time trying to force div to look like table I decided that enough is enough. If a table is what I need, a table is what I will use. What I need is a layout:
  • Header should cover the top of the window.
  • Header height should be determined by its contents.
  • Footer should cover the bottom of the window and resize by it. It must always be at the bottom of the window except when the contents of the page are more than that.
  • Left aside width should resize according to contents. The height should resize to full window or to contents (the largest of the two)
  • Right aside should behave like left aside.
The entire think should behave as a TABLE.
<table  id="tabLayout" role="presentation">
<tbody><tr id="trHeader">
  <td colspan="3">header</td>
</tr><tr>
  <td id="tdNav">nav</td>
  <td>main</td>
  <td id="tdAside">aside</td>
</tr><tr id="trFooter">
  <td colspan="3">footer</td>
</tr></tbody></table>
/*=== Reset start ====*/
html,body,table,tr,td {
 margin:0;
 padding:0;
 -moz-box-sizing:border-box;
 -o-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}
table {
 border-collapse:collapse;
 width:100%;
}
html,body {
 height:100%;
}
/*=== Reset end ===*/
table#tabLayout {
 border-collapse:collapse;
 width:100%;
 height:100%;
}
#trHeader, #trFooter {
 height:1px;
}
#tdNav, #tdAside {
 width:1px;
}

No comments:

Post a Comment