Menu
The width of the div "topNav" changes by few pixels when its position style is changed from relative to fixed. I found a jquery plugin (http://imakewebthings.github.com/jquery-waypoints/) which can perform the same functionality I'm looking for elegantly, but I feel it is a overkill for this purpose.
EDIT: My question is how to avoid changing the div sizes.
Check out the code at :
http://jsbin.com/azace5/edit
421
To convert it to a fixed-width layout, simply add a fixed with to the #wrapper and set the margins to auto. Setting the margins to auto will cause the left and right margins to be equal no matter how wide the browser window is, which will cause your fixed-width layout to be positioned in the center of the browser.
To position an element "fixed" relative to the window, you want position:fixed , and can use top: , left: , right: , and bottom: to position as you see fit. This will position yourDiv fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
You need to remove the page's "default margin". This will do it in "every browser":
html, body {
margin: 0;
padding: 0
}
See: http://jsbin.com/azace5/2
153
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
