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 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.
4 answers
solution1
5 2013-03-26 02:42:50
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 (eg 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!
solution2
1 2013-03-26 02:27:38
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>
solution3
0 2014-03-10 20:47:07
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.
solution4
0 2015-01-29 14:17:47
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.