Make fixed position of header and footer using css
22
June
2013

CSS Code



body { margin:0; padding:0; }

#header_container { background:#f00; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0;color:white;font-size:30px;font-weight:bold; }

#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }

#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }

#content{}

#footer_container { background:#efefef; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%;color:#000;font-size:30px;font-weight:bold; }

#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }

HTML Code


<!-- BEGIN: fixed Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: fixed Header -->

<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.
<br /><br />
Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.
We all have our own techniques, but one of the most effective techniques is to actually put some text where text goes and some pictures where pictures go to make sure everyone can see the vision you’ve created.
<br/><br/>
Coming up with filler text on the fly is not easy, but it is becoming more and more of a requirement. Fortunately, some designers and developers around the web know this and have put together a bunch of text generators to help you present your vision.
Some are standard (like the always popular ‘Lorem Ipsum’ generators) and some are really fun. Either way, pick one of your favorites from below and start generating text and completing your vision.
</div>
</div>
<!-- END: Page Content -->

<!-- BEGIN: fixed Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: fixed Footer -->
  • 953 View
  • Pin It