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 change a button data-icon size

    How to do Vertical+Horizontal centering in CSS

    How to make the headline (H1 with lines on the sides) with CSS only

    How to make my div's shrink dynamically, and not hide certain content?

    How to create a button with a CSS-animated background?

    How to capture hover events on css (less) box-shadow

    How To Do Multiple Hover On List

    How to stop shadow effect from moving using pure css?

    How to get a frame off animated png using CSS?

    How to unfold or close content in html/JS - always assigned to different id

    how do i edit my CSS to show following things please [closed]

    How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

    How well do you need to know HTML before delving into CSS?

    How to select an element that has id starting with a digit (css)?

    Google Chrome unresponsive on simple CSS page - how to fix?

    How to display icon with text in html with the help of css?

    How to center align a div vertically which uses bootstrap?

    How not to use body style css rule in part of html code?

    How to select list item by its contents?

    Yahoo.widget.Editor - How to configure font size of text

    How to display .entry-content CSS on Wordpress home page?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How to achieve image changing on hover?

    @font-face font working fine locally but when pushed to server it just shows up as a default HTML font

    How can I change the size of this box? (CSS)

    How to put a image below another?

    How can I get this chart to display next to data table in CSS?

    How to add css class in aspx.cs page means code behind page

    How can I opt out of a CSS style on a case-by-case basis?

    How to make a webpage mobile friendly with css media queries