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

Question

enter image description here

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 I have tried so far. Its close, but doesn't look professional.

<html>
<body>
    <div>
        <div style="border-style: solid; height: 20%">
            Header</div>
        <div style="overflow: hidden; height: 55%">
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                left</div>
            <div style="border-style: solid; float: left; width: 57%; height: 100%;">
                content</div>
            <div style="border-style: solid; float: left; width: 20%; height: 100%;">
                right</div>
        </div>
        <div style="border-style: solid; height: 20%">
            Footer</div>
    </div>
</body>
</html>

A clean and simple css would be greatly appreciated.

Look up a grid CSS framework like Twitter Bootstrap. Also, research css flexible layouts. — Marc Audet, Mar 26 '13 at 02:27
You have a good start. I would focus on revising your existing code and migrating all your styles to an external style sheet. Your outline won't look exactly like your image because you need content (or need to set heights) in order for it to appear that way. — djthoms, Mar 26 '13 at 02:27

score 5 · Answer 1 · answered Mar 26 '13 at 02:42

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!

This doesn't meet the criterion of spanning the entire height of the page. You have the height hard coded to 500px; — d512, Aug 27 '13 at 22:06
It is self-evident that the fixed height value is for display reasons only. I imagine the questioner was able to deduct that it was for demo reasons only. — djthoms, Aug 28 '13 at 04:35
Removing the fixed height will move the footer up. He wanted the layout "to span the entire height". — armin, Jan 29 '15 at 14:07

Muhammad Omar ElShourbagy · Answer 2 · 2013-03-26T02:40:20.617

1

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>

edited Mar 26 '13 at 02:40

answered Mar 26 '13 at 02:27

Muhammad Omar ElShourbagy

6,718
2
32
50

can you tell me how did it miss up ? i mean how was the layout after applying this code ? – Muhammad Omar ElShourbagy Mar 26 '13 at 02:31
1

You should read about [fixed positioning](http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning) in order to understand it, @Foo – djthoms Mar 26 '13 at 02:31
1

I think Muhammad's solution works. Just that you have to do some adjustments. Remember to start with and insert Muhammad's codes but do the following adjustments: for the border style :0; *for all* then try adjusting their width and top and height pecentages and pixels to make it appropriate – Mar 10 '14 at 20:23

nelek · Answer 3 · 2014-03-10T21:04:19.157

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.

score 0 · Answer 4 · edited May 23 '17 at 12:26

0

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

edited May 23 '17 at 12:26

Community

1
1

answered Jan 29 '15 at 14:17

armin

2,047
3
17
19

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

4 Answers4

Linked