I currently have a banner/header as well as a horizontal navigation menu below this header that I would like to freeze pane/fix, so that any content below this header/nav just scrolls beneath it, always.
FYI, need it to work in IE8.
I have setup the following skeleton structure of this as follows:
<div id="banner-nav">
<div id="banner">
<div id="nav">
</div>
</div>
</div>
<div id="content">
</div>
Would appreciate your help on this. If it cannot be done on the above fashion, any other alternatives that would accomplish my requirement, would be great.
Thanks.
change
ReplyDelete<div id="banner-nav">
to
<div id="banner-nav" style="position:fixed">
You need to apply fixed positioning to your banner-nav element:
ReplyDelete#banner-nav {
position:fixed;
width:100%;
}
To get this to work in IE7+, you need a doctype that makes the browser render in "standards mode". The HTML5 doctype should do this:
<!DOCTYPE html>