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

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:

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!