Created
July 5, 2013 18:02
-
-
Save meub/5936187 to your computer and use it in GitHub Desktop.
Wrap around a fixed element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
div { | |
border:4px solid black; | |
height:100px; | |
position:fixed; | |
left:250px; | |
right: 0; | |
} | |
A fixed position happens relative to the viewport, so that the positioning properties left, right, top, and bottom, as well as width and height will position and size the element based on the size and boundaries of the viewport. | |
If you specify a width of 100%, this means the width will be 100% of the viewports width. When you combine this with a left margin to account for another element, this element stretches out of the viewport and thus shows a horizontal scrollbar. | |
By not specifying a width on the element, the element's width gets a value of auto and it will be sized by the positioning properties - in this case it will fit the remaining width of the viewport. | |
By specifying right: 0px, we are saying the element's right side should be 0px away from from viewports right boundary, even after resizing. | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment