I have a fiddle here. I set float left & width(20%, 80%) for the li's. It looks good now.
For some reason(actually, its an another story!) i want the set position: absolute for div.content.
If i do, the moreContent div comes to the left like this.
I don't understand why its happening like this because, i set the parent of content div's
position as relative. So, it should be inside the li.
I just want to keep the same layout with the div.content positioned as absolute.
How to do it.
Thanks!
The problem is that when you position div.content as absolute, it then has no influence of the position of the other elements. I'd suggest setting a margin, this will then mimic what div.content would do if it wasn't absolute: http://jsfiddle.net/ahmednuaman/MQ6Rg/3/
Absolute position is outside the normal page flow - ie nothing to do with the position of other items on the page.
Once you set an element to be 'absolute', it's basically removed from the page's DOM for positioning calculations. Making .content be absolute means that .moreContent now has nothing "left" of it to float against, so it moves right up to the parent container's bordre.
Related
I got a DIV in my HTML-Markup, which is positioned relative. The DIVs inside this container are absolute.
this destroys the complete layout, because the following HTML-Elements are now positioned wrong, the (above) DIV which is relative, overflows them...
but why? How can I fix it?
Once you position a container with :relative, everything inside it will be positioned in relation to that. The position:absolute pulls the child elements out of the flow of the page an positions them at the top of the container with position:relative.
Thus, once you have elements with position:relative, you will want to also add rules to move and position the child elements. Consider using left: and top: or right: and bottom to position your :absolute child elements.
Alternatively, you might try to position the child elements with :relative as well, if you don't want them pulled out of the flow of the page.
Do you have code to look at, or a jsfiddle? Otherwise it's difficult to know what's going on and to suggest a fix.
If your relatively-positioned element only contains absolutely-positioned elements, you need to give it a height setting, otherwise it will have zero height (the absolutely-positioned elements won't be counted for auto height), and therefore probably cause some overlapping with subsequent elements.
This question goes to the css wizards. I've googled this and couldn't find an answer.
At this point I'm not sure it's possible:
How do I specify the position of an element within another element, semi-absolutely so to speak?
I want to say "Put element inner x pixels to the right of outer's left border, no matter where outer happens to be at the moment."
This might be possible with javascript, but shouldn't it be possible with css?
#inner {
position: absolute;
left: 10px;
}
What this CSS actually does is position the #inner element 10px from the left border of its 'closest' parent that is has a position value of absolute, relative, or fixed. If no such element is found, it is absolute positioned relative to the body element, but if you make sure that the inner element has a parent that has its position defined with CSS, it will be positioned absolutely within that parent.
Take a look at this JSFiddle. First, look at the html and CSS to see how it was constructed, then go ahead and use your mouse to drag either of the element around (that's what the javascript in their does, its purely for demonstration purposes). Notice how when you drag the outer element, the inner one moves with it? All you are doing when you drag the elements around is changing the values of their top and left properties, and since its parent is absolute positioned, the child element will stay at the same spot within it no matter where you move it on the screen. :D
Absolutely, it's easy! All you have to do is specify the parent to have a position (either relative or absolute) and then the absolutely positioned child will be positioned "relative" to the closest positioned parent.
Confused?
Please look at this fiddle:
http://jsfiddle.net/dyv88/16/
On IE7, if I put width: 100% on a table, inside a div with position:absolute and width unspecified, the table takes over the entire screen.
All more recent browsers, it does not.
Can someone please explain?
And what's the best way to fix this? Do I just need to specify width on all absolute positioned elements? Or is there a better fix with some kind of wrapper element?
If you want to position absolute, it must be relative to the first parent that is positioned. It seems that IE7 doesn't know which parent that is, because you did not specify one.
Do position: relative on one of the parents to fix this. Or position the table relative.
I think specifying width on absolute positioned elements is always a good thing, since absolute positioned elements are taken out of the regular low of the page.
jsFiddle Demo
I am getting an error when trying to send a div to the very end of my site.
I am using a general height:100% and the div then moves to the end of the visible screen, but when I scrolls down to the end of the site, the div remain in the same position.
I want to add the div to the end, but for some reason I couln't do it.
Look at the pic.
My code: http://www.securebitcr.com/test/site2.php
I appreciate any kind of help with it.
Thanks,
Your #footer_dv has position: absolute but you want it to have position: fixed. An absolute position is relative to the parent so an absolutely positioned element will move and scroll with its parent; a fixed position is relative to the browser viewport so it won't move.
just remove the position:absolute all together and fix your height style of your body, you have 100%px; make it 100%; and your footer should just float to the bottom.
I'm having trouble with some css.
Here's the fiddle: http://jsfiddle.net/bkVDH/
I'm trying to make #window's height stem from what's in .content. .content is absolutely positioned, but in a way that you can figure out the height of .wrap if you know the height of the content div. The same is true between .wrap and #window, so I was hoping that since .content has a height due to what's inside of it, #window would to, but it's not working.
Is this solvable?
Absolutely-positioned children go out of the normal flow an cannot affect parent's height, sorry.
The point of absolute positioning an element is to take it out of the flow of the document, i.e. stop it from affecting its parent element, sibling elements, etc.
What reason do you have for absolutely positioning .content?