Skip to content

Instantly share code, notes, and snippets.

@meub meub/gist:5936187
Created Jul 5, 2013

Embed
What would you like to do?
Wrap around a fixed element
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
You can’t perform that action at this time.