How to Position Fixed with LOTS elements inside


Tags: css,css-position

Problem :

I'm working on a simple page but got into a trouble with fixed position. Wonder if anyone has the time to give me a hand.

It will be too much to copy and paste all the codes here but I will paste a link

http://et4891.com/lecture/protosite.shtml

for the header with the nav I want both being fixed which means when I'm scrolling down the page the whole header with nav will always be there. But no matter how I do it things just keep on messed up. The nav is with css dropdown and floating.

Anyone able to give me a hand? I want to fix the position only with css not jquery though.

Thanks in advance.



Solution :

Throw header and nav into a div. Give that div position: fixed;. Make sure you increase margin-top for proto-main-content as this section is no longer affected by the header and nav's position.


    CSS Howto..

    How to deploy just HTML, CSS webpage to jetty?

    How to apply asynchronously fetched CSS into view

    How can i repeat the image rollover and have multiple aligned underneath on my website?

    How to hide navbar when when overlay appears

    How can I get a div just inside an input at 0% and 100%?

    how to have the text under the logo css

    How can I make a 2-level navigation bar? [closed]

    How to overwrite an !important CSS property in jQuery

    How can I improve this mobile site? [closed]

    How to change font-size of multiple elements using jQuery

    How to overwrite “left: 80%” from inline CSS

    How do I lock a sidebar to the height of a window even when a user scrolls?

    How to make a layout scale with CSS?

    How can I pipe the output from gulp-w3c-css to the console

    How to prevent right-to-left text appearence while using arabic language?

    How to refere a stylesheet in phonegap?

    How to modify twitter bootstrap “.icon-bar” colors

    How to write this :not “in other element” CSS rule?

    How can I place HTML in a JavaScript string and have it validate?

    How to float element next to line?

    Make Dojo or Ext JS4 widgets look and behave like Kendo UI. How demanding will it be?

    Image won't show up html + css

    how to get css highlighting and hinting for php files in dreamweaver that are being read as css files?

    css: how to make circles connected by lines responsive with bootstrap?

    how to hide submenus in jquery menu

    How do I prevent a JQuery UI menu from floating?

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    How do you create a scrolling window over a still background image with CSS?

    How to develop a solid CSS strategy?

    How to define class in CSS