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?
Related
In the image above, list of blocks has a maximum height with overflow-y: scoll. However, when the more icon is clicked, I want the dropdown to come over everything and ignore the max height of parent div.
Is it possible with css?
Your popup is likely an absolutely positioned element, and absolutely positioned elements are children to their nearest non-static (relative or absolute) positioned parent. If that parent has an overflow: hidden/scroll/whatever style on it it's going to cut off the child element regardless of what you set the child's z-index to.
You need to remove position: relative/absolute from the scrollable parent div and put it on the next grandparent div, then the child element won't be affected by the parent div's overflow style, however you may have to change your positioning calculations for the child if its parent has changed.
Relevant article here.
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.
I am practicing HTML markup and CSS few months ago and now I'm quite understood about web design standards and layouts. I've seen many times on the source of other web layouts which they use position relative on their main Wrapper or Container div.. I want to know the purpose of utilizing this because there is no any physical/visual change appear on that wrapper div.. so what is the purpose behind?
Using position: relative; on a container is done so position: absolute; on descendants will apply to the container element, not the body.
See the position page on learnlayout.com.
http://www.w3.org/wiki/CSS/Properties/position
The relative position will tell the browser to "reserve" the space of the element in the normal document flow, and you can displace the said element in anyway without further affecting document flow (e.g. left: -50%).
Also, the relative position allows inner absolutely positioned children to be position relatively to this element. E.g., if the child element has an absolute position of top: 50px, it will be positioned relatively from the top border of the parent element (who is relatively positioned) by 50px, instead of from the <body> element.
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 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.