Jump to content

[SOLVED] Position Fixed and Floating


DarkxPunk

Recommended Posts

I want a menu to basically hover as I scroll. So obviously Position: Fixed. But within this menu I have one element floating right. Position: Fixed screws that up. How can I fix this?

Edited by DarkxPunk
Link to comment
Share on other sites

You want menu to remain at top as you scroll down??? give #nav only position: fixed; you will need to give it width, as it will collapse and not follow the rules of shrinking to content anymore, elements below it will move up to take up the space it once occupied, so the top one will require a margin-top, to force it down to its original position. IF that is what you mean?

Link to comment
Share on other sites

That is exactly what I want and I managed to do that, but then I ran into a big problem of my float right (used on the search field) not working. Thats my problem as the subject of this post says.

Link to comment
Share on other sites

But within this menu I have one element floating right
suggests float right element as you say IS WITHIN MENU, the menu is what is contained between #nav element and it closing tag, therefore right floated search element is not part of menu, and therefore not as described in subject. place outer container around header, give this position: fixed; top:0; left:0; right:0; give header a width: 980px; as this will be removed from confinement width of wrap completely. adjust element below it! as mention before, done!
Link to comment
Share on other sites

If you don't define at least top: left: in some cases it will act weird and place itself at the top edge of elements that use top margins that are below it, or below and left of margins, padding etc applied to body (by default about 10px margin). The left:0;, top:0; will force it to top, and left edge of browser window, and with the addition of right:0; force it to the right edge of browser filling the entire width of screen, but! why not use width:100%; if you use width: 100% on a 1024px width browser window, and then add 20px margin, it remains 1024px in width, and is forced to right by left margin, so you end up margin gap on left, and no margin gap on right as the right edge of this width:100% (1024px;) position: fixed; element and right margin is forced beyond right browser window screen edge, and because it is position: fixed; no scrollbars will show. Using position: fixed; top:0; left: right:0 margin:0 20px; you will get want you wanted, 20px margin either side, with remaining area taken up by the element that is available to it within applied margins.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...