I have following code:
<div style="border:4px solid black;width:100%;height:100px;position:fixed;left:250px;">
out of bound :(
</div>
I want it not to cross the window. I need its right border to stay visible.
JSFiddle link: http://jsfiddle.net/9SZAB/
Remove the width property and instead use right: 0:
div {
border:4px solid black;
height:100px;
position:fixed;
left:250px;
right: 0;
}
Updated fiddle: http://jsfiddle.net/9SZAB/2/
Why this works: position: fixed tells the element to have a fixed position 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.
Previously you had width: 100%, which, combined with position: fixed, means that the element's width should be 100% of the viewport's width. This width is not and should not be affected by any margins or positioning that you also set - the element will still have 100% of the viewport's width, no matter where it is.
But if the element has a width value of auto (which is default), then the positioning properties can be used to size it. Just as left: 250px means that the left side of the element should be 250px away from the viewport's left boundary, right: 0 means that its right side should be 0 (px, em, parsecs - unit doesn't matter for a value of 0) away from the vp's right boundary. Resize the viewport and this state will still be true.
more info: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Related
:)
when i dont set top/left properties for an element fixed what acccured??
please see this sample code:
#fixed-menu{
background-color:#ba4444;
border-top: 5px solid #0892cd;
height: 60px;
position: fixed;
width: 100%;
z-index:9999;
box-shadow:rgb(128, 128, 128) 0px 5px 15px 0px;
}
#wrapper{
height:900px;
width:960px;
margin:0 auto;
background-color:yellow;
margin-top:100px;
}
<body>
<div id="fixed-menu"></div>
<div id="wrapper"></div>
<body>
with above code,fixed-menu also have 100px margin-top!!!!why?????
...................
how calculated top property???
Once an element has been fixed with position: fixed, the three properties left, width and right together determine the horizontal position and size, relative to the window. (CSS uses the more general word viewport; a window is an example of a viewport.)
You need at most two of the three properties, i.e., left & width, right & width, or left & right. Setting just one of the three, or none at all is also possible. In that case, CSS will use the element's natural (“intrinsic”) size and/or position, as needed, for any properties that are left at their default value ('auto').
The same holds for the trio top, height and bottom. You need to set at most two of them: top if you want to control the distance from the top of the window, bottom to control the distance from the bottom, and height if you want to specify a fixed height.
I hope that answers your question. For further reading you can refer to this link
Tip : Fixed position is free flow guy in the document window. Based on the element present before the fixed element aligns itself next to it.
In your example there's no elem before fixed div but the following wrapper div you are setting the margin top to 100px. which affects the viewport. So you can imagine the viewport for fixed element starts below the 100px mark set by the wrapper div.
you can see removing the margin in wrapper div or set the wrapper position to fixed with margin top 100px. you will get the idea.
On this website: www.giftlab.com
The "Free Shipping" circle at the top (div id: floating-header-button) has position: absolute; top: 10px. Its parent div (headerContainer) has style position: relative; padding: 1px;
If the padding of the parent div (headerContainer) is changed from 1px, to 0px, the child div (floating-header-button) drops down the page by about 20px. What causes this? How can a 1px change to the padding produce a 20px change to the positioning?
If I increase the padding, the circle stays where it is and everything else moves (as I would expect), so why does reducing the padding below 1px produce such a counterintuitive effect?
Without the padding on the .headerContainer, a margin on a sub-element (.logo specifically) collapses with .headerContainer, bumping the entire container down by its margin which is 20px.
I have a website with 5 horizontal divs whom all float:left and have a % width. The left one I want to have text in, and a scrollbar. However, the scrollbar only shows up when I give it a position:absolute. Try it in the jsfiddle. When I do that, the div ignores the other 4 and they get out of line. How do I work around this?
The jsfiddle > http://jsfiddle.net/QN8RS/
Add position:absolute; to the following div in CSS. You will see it working, but the divs get out of place..
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
overflow:auto;
top: 0px;
bottom: 0px;
}
You haven't specified the height of the <body> so its height is computed as auto.
You specified the height of .main as 100%. This is a percentage so, because the height of its parent (the body) is computed as auto, the computed height is also auto.
You specified the height of #left as 100%. This is a percentage so, because the height of its parent (.main) is computed as auto, the computed height is also auto.
Since the height is auto, the height as is tall as it needs to be to hold all the content.
Since you have set overflow: auto, you only get scrollbars if the content is taller then the element (which it isn't).
Set height: 100% on the html and body elements so that the computed height of #left is the height of the viewport and not auto.
I think you are looking for :
overflow-y: scroll
Little Fiddle
The reason is that you have specified height:100% on your div .main. 100% of what? Which parent?
If you specify the height of body to 100% then it will work.
html, body { height: 100%; }
Check your updated fiddle: http://jsfiddle.net/QN8RS/2/
Instead of using floats, use position: absolute; and left: number%; (you will have to figure out how much % the left is of each element).
Check out the Fiddle:
http://jsfiddle.net/QN8RS/3/
what I try is to create a window, that has fixed width and is centered.
Should also have variable height, depending on the browsers-viewport-height with a top offset of 20px and a bottom offset of 20 px;
I don't want to use JQuery / JS for this it should be in plain css.
Here some code-snipped:
#viewport should be the the browsers height / width container
#window should be the resized window (centered in middle, filling up all height except of top 20px and bottom 20px
http://jsfiddle.net/ejRTU/87/
Someone has any idea how to solve this?
Use position: absolute and set the top and bottom attributes to 10px; See this fiddle jsfiddle.net/ejRTU/88/
I have a div directly under the body. My HTML looks like this:
<body>
<div class="parent"></div>
</body>
And the css I use is this:
.parent {
border:1px solid black;
bottom:10px;
position:relative;
top:100px;
width:500px;
}
This div doesnt stretch to the entire viewport/available body height. However, if I change the position to absolute, It does stretch.
Is there a way to get a relative positioned element to stretch to its container element height. I tried height 100% as well and it works but it gives a vertical scrollbar to me as the element is positioned at 100px from TOP.
The terms top, bottom, left and right are generally used for absolute positioning. If you want a div container to be as big as it's parent's container, then you have to specify through the terms height and width, and use a percentage or integer with a measurement scale attached such as 'px'. If you are worried about a scrollbar, just use the rule overflow:hidden;