Can you look at jsFiddle example and tell me why my green <div> won't stick to the bottom of its parent's scrollable height? I'm sure it's something simple. Thanks in advance!
You're not specifying any positioning for the wrapper element (body in this case) so your element is positioning to the bottom of the window.Try assign a position different from static to the wrapper element (relative,absolute whatever it's fine and it depends on your needs)
give a look here
this might help you
hope this help
If the answer to my comment is yes, than give you body tag a position of relative
body
{
position: relative;
}
If some other element is the parent, just replace body with that element. With you given code, the green div is not sticking to the bottom because it is absolutely positioned and does not have any relative or absollutely positioned parent/ancestor, in which case it will position itself relative to the viewport/browser window/canvas (not the canvas element in HTML5) which may or maynot be the html or body element depending on the user agent/browser. When you give the body a position of relative, it provides a new positioning context and than the green div will be positioned relative to the body element. In case if the body tag is not the parent, give the position relative to the parent element, which ever that may be.
Fiddle
Try this:
#green{
position:fixed;
...
}
Related
I'm having problems to make the div parent inherit the height of the div child.
.parent {
position: relative;
}
.child {
position: absolute;
width: 960px;
}
The text should be in the black gap.
Any help?
Do you need the child to be positioned absolutely for some reason?
This is why it doesn't 'fit' in your parent element.
According to the documentation
Position absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
View the illustrations at https://developer.mozilla.org/en-US/docs/Web/CSS/position to see what exactly happens.
Remove any size attributes of the parent, it will then become as big as it needs to be for its contents.
Why have you declared position:absolute? If you want to move .child you should use position:relative or margins.
Absolute positioning removes the element from the natural flow of the document.
I have a problem to display the absolute positioned div and bring it to the front.
The relative div is small in height and the absolute one is big in height. And because I'm using floats inside the block divs, I've to use overflow:hidden to actually get the block div some height.
When I'm not using overflow:hidden and floats then the z-index applies just fine. But after applying floats and overflow:hidden the problem occurs.
Fiddle Link
Thanks for your help in advance.
I've to use overflow:hidden to actually get the block div some height.
you can use clear:both to give height for the parent of floating elements. you can use the ::after pseudo element to clear the float as follows:
.block::after{
content:"hi";
display:block;
clear:both;
}
JS Bin
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
can i place a div at absolute position relative to body which is dynamically generated inside a a div which position is relative
here is my scenario i have to keep it this way only
http://jsfiddle.net/bipin000/swqqH/
okay its not possible until you make parent div position:static and then make dynamic div position:absolute
http://jsfiddle.net/swqqH/25/
No, that's not possible. As the parent div is positioned, it becomes the offset parent, so the absolutely positioned div will be placed relative to the outer div, not relative to the body.
i know what is absolute & relative position but some points are still not cleared to me.
for reference
css:
.rel{
position:relative;
background:red;
}
.abs{
position:absolute;
background:blue;
}
html:
<div class="rel">rel</div>
<div class="abs">abs</div>
now points are :
relative div takes 100% width automatically but absolute div only takes content width. why?
when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?
when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?
when i don't give top:0 , left:0 to the absolute div it's takes above div height. why?
Setting position:absolute removes the element in question from the normal flow of the document structure. So unless you explicitly set a width it won't know how wide to be. you can explicitly set width:100% if that is the effect you're after.
An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore, setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.
This is probably something to do with the parent elements in your HTML but I can't help further unless you provide the full HTML and CSS of your page.
The default value of the top and left properties is auto. This means the browser will calculate these settings for you and set them to where the element would be rendered if it didn't have position:absolute.