Html Page With A Standard Header Footer Layout Without Using Table Tag

How can I attain whats shown in the image without using tables? I want the layout to span the entire height/width of the page, even if the browser window is resized. This is what

Solution 1:

Foo, what you need to do is get a good foundation in HTML and CSS before attempting this. Ideally, you want to avoid inline styles (e.g. style="border: 1px solid black;"). You don't need fixed or absolute positioning to accomplish this. It's entirely doable with basic HTML/CSS know-how. Here is an alternative solution to what you're asking:

<divclass="header"><divclass="header-inner"></div></div><divclass="content"><divclass="sidebar left"><divclass="sidebar-inner"></div></div><divclass="content-inner"></div><divclass="sidebar right"><divclass="sidebar-inner"></div></div></div><divclass="footer"><divclass="footer-inner"></div></div>

And the CSS:

/* Temp styles */.header, .sidebar, .content, .footer { border: 5px solid black; }
.content, .sidebar, .footer { border-top: none; }
.sidebar.right { border-right: none; }
.sidebar.left { border-left: none; }
/* Core styles */.header {
    position: relative; /* needed for stacking */height: 100px;
    width: 100%;
}
.content {
    position: relative; /* needed for stacking */width: 100%;
    height: 500px;
}
.sidebar {
    position: relative; /* needed for stacking */width: 20%;
    height: 100%;
    border-top: none;
}
.sidebar.left { float: left; }
.sidebar.left:after,
.sidebar.right:after {
    clear: both;
    content: "\0020";
    display: block;
    overflow: hidden;
}
.sidebar.right { float: right; }
.footer {
    position: relative; /* needed for stacking */width: 100%;
    height: 100px;
}

Here is a demo. Take this demo and learn from it! Hope this helps!

Solution 2:

Use the position: fixed (ALL) along with top: 0px; (top div) , right: 0px; (right div), left: 0px; (left div), bottom: 0px; (bottom div)

Fixed Positions should help in your case

EDIT: here is the code working:

<div><divstyle="border-style:solid;height:20%;position:fixed;top:0px;width:100%;">Header</div><divstyle="overflow:hidden;height:55%"><divstyle="border-style:solid;float:left;width:20%;height:60%;position:fixed;left:0px;top:20%;">left</div><divstyle="border-style:solid;float:left;width:55%;height:60%;position:fixed;top:20%;left:20%;">content</div><divstyle="border-style:solid;float:right;width:20%;height:60%;position:fixed;right:0px;top:20%;">right</div></div><divstyle="border-style:solid;height:20%;position:fixed;bottom:0px;width:100%;">Footer</div></div>

Solution 3:

css :

#header
{
 position:fixed;
 top:0px;
 left:0px;
 right:0px;
 height:20%;
 overflow:hidden;
}
#leftSide
{
 position:fixed;
 top:21%;
 left:0px;
 width:20%;
 bottom:21%;
}
#rightSide
{
 position:fixed;
 top:21%;
 right:0px;
 width:20%;
 bottom:21%;
}
#footer
{
 position:fixed;
 height:20%;
 left:0px;
 right:0px;
 bottom:0px;
}
#content
{
 position:fixed;
 top:21%;
 bottom:21%;
 left:21%;
 width:57%;
}
div {display:block; border:1px solid black;}

html :

<div id="header">header</div>
 <div id="leftSide">left</div>
 <div id="content">content</div>
 <div id="rightSide">right</div>
 <div id="footer">footer</div>

in this example I use fixedposition, but you can set overflow-x and overflow-y for every of this div's. for example: for content you can use overflow-x:hidden and overflow-y:auto or scroll and so on for every div. of course, page will not be scrollable in this example.

Solution 4:

I guess you already figured out a solution by now, as the question is nearly two years old. However, some other people might stumble upon this post, so this is for future reference:

Take a look at this answer and check the JSFiddles. It's a relatively solid solution using CSS tables (no HTML layout-tables).