HTML page with a standard header footer layout without using table tag

Question

How can I attain whats shown in the image without using tables? I want the layout

Answer 1

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).

Answer 2

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:

<div class="header">
    <div class="header-inner"></div>       
</div>
<div class="content">
    <div class="sidebar left">
        <div class="sidebar-inner"></div>
    </div>
    <div class="content-inner"></div>
    <div class="sidebar right">
        <div class="sidebar-inner"></div>
    </div>
</div>
<div class="footer">
    <div class="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!

Answer 3

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

Answer 4

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 fixed position, 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.