My web template is based on div tags. I want to freeze header part (Header, logo etc), I mean when you scroll the page the header should be in fixed position.
<!--Header and Logo -->
<div id="outer">
<div id="header">
<h1><a href="#">Some Application</a></h1>
<img src="/media/images/logo.gif" height="95" width="190">
</div>
Here is my css
#outer
{
}
/* Header */
#header
{
height: 95px;
background-image: url();
background-repeat:no-repeat;
background-position: bottom left;
padding-left: 20px;
padding-top: 15px;
padding-bottom: 15px;
}
Can some one help me? Thanks
To freeze the row & column we need to consider the following CSS tag/selector: top: This property is used to set the top position of the element, for the header row(s) (freeze row) this will be always 0.
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
Hover over the header. Click “Header” Select ”Set As Sticky Header”
Try using the position: fixed;
property. Here is an example fiddle:
http://jsfiddle.net/austinbv/2KTFG/
You want position: fixed
.
A nifty CSS attribute:
#outer {
position: fixed;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With