Skip to content

Instantly share code, notes, and snippets.

@meub
Created July 5, 2013 18:02
Show Gist options
  • Save meub/5936187 to your computer and use it in GitHub Desktop.
Save meub/5936187 to your computer and use it in GitHub Desktop.
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