position:fixed; layout : Size and Layout « Layout « HTML / CSS
- HTML / CSS
- Layout
- Size and Layout
position:fixed; layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
/* CSS Document */
div#heading {
position:fixed;
top:0px;
left:0px;
width:100%;
height:80px;
color:#ffffff;
background-color:#666666;
border:1px solid #000000;}
div#nav {
position:fixed;
top:80px;
left:0px;
width:120px;
background-color:#efefef;
border:1px solid #000000;}
div#page {
margin-left:120px;
margin-top:80px;
background-color:#ffffff;
border:1px solid #000000;}
div#footer {
position:fixed;
bottom:0px;
left:0px;
background-color:#999999;
width:100%;
height:20px;}
p {width:250px;}
</style>
</head>
<body>
<div id="heading"><h1>Masthead</h1></div>
<div id="nav">
Navigation item<br />
Navigation item<br />
Navigation item<br />
</div>
<div id="page">
<h1>Heading One</h1>
<p>This is paragraph one.</p>
<p>This is paragraph two.</p>
<p>This is paragraph three.</p>
<p>This is paragraph four.</p>
<p>This is paragraph five.</p>
<p>This is paragraph six.</p>
<p>This is paragraph seven.</p>
<p>This is paragraph eight.</p>
<p>This is paragraph nine.</p>
<p>This is paragraph ten.</p>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Related examples in the same category