I have a div set to position:relative as my parent div
the child div's inside are all set to position:absolute so that they stay inside of the parent div
(i did this in an effort to have some "responsive-ness" for different display sizes)
however, now that i have used this method for the primary elements of the site, i cant seem to add tables to the child div that i want to use as a content area. im sure this is because tables act like divs and their position will be relative to the parent div
so im assuming there is no way to keep content inside of a child div?? no clearfix or anything?? :O)
Related
What I have - parent div with several (5) child divs. And few child divs contain text, hence they may change their side and move others inside parent div (in certain volume).
But I need that 4th of child div stays at his place all the time (see picture attached).
I tried to define its position using position:relative for parent and position:absolute for needed div (let's call him - "Object"). But in this situation when the height of other child divs, locating higher than Object, changes, one of them may stay on the content of the "Object" (over it).
Moreover, I found that with position:absolute "Object" started to ignore padding of parent div!
As I see - I need to fix somehow the position of Object in relation with top border of parent div. BUT - margin-top for 4th div doesn't work for it, as it moves the child div #3 above.
I am new to CSS and will be glad if anyone may help me.
// doesn't work as needed:
div#father {position: relative;}
div#son5 {position: absolute;}
initial draft code for parent and child divs at Jfiddle https://jsfiddle.net/741rzafq/2/
If you want to keep the element fixed at its position, you can use position:fixed; for that element. It will remain at its position even if you scroll the page.
I'm using a javascript library to create modal windows in my application.
I'm having a problem where there are 2 divs, A and B (A is parent of B) both position:fixed. Div A has z-index:1 and the Div B z-index:3.
I want another div, C, also with fixed position but external to these two, be in between them (with z-index:2), but it ends up on top of all. Apparently the child div(B) z-index does not matter at all and always stays on bottom of div C..
I made a JSBIN with the sample here:
http://jsbin.com/koyasu/edit?html,css,output
This is just how z-index works. The parent div sets the layer for it and all of its children. Children who set a z-index will only be changing their layer inside that parent.
You'll have to restructure your DOM for this one, I'm afraid.
A fixed position always refers to the viewport, so you might as well take DIV "B" out of "A", getting three fixed elements on the same level. Then z-index can be applied more relieable.
I have one parent div and multiple child divs placed in one row. These child divs are created dynamically, and I don't know how many of them will be created in the moment of rendering page. I want parent div to have fixed width, and to have horizontal scrollbar in case all child divs are not visible. This works fine.
But when I have content inside my child div, that div moves down, and it's not alligned with other divs.
I'm not sure where is the problem?
Here's the jsFiddle example.
I tried to put position:absolute to inner content of child div, but that didn't help much.
I added:
div {
vertical-align:top;
}
http://jsfiddle.net/LSZZx/30/
I have a table with some data but I want to use one cell for displaying more divs. Each of divs has different exact width and position from the left.
I tried it with position:relative but position of each next div depends on the divs on the left and I don't want that I want each div in that cell to be exactly x pixels from left of the cell border.
I also tried position:absolute but this does go really to the <html> tag as they write here http://www.w3schools.com/css/css_positioning.asp:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
Now I'm not sure how to solve my problem.
My example: http://jsfiddle.net/6wSAJ/465/
(Made from accepted answer from here: Relative positioning of two divs)
Edit: I guess I forgot to mention that I need it to work in IE8.
Edit 2: http://jsfiddle.net/6wSAJ/468/ The problem I was dealing with is that if I set the cell relative it completely ruins my real problem table so I have to make divs with relative position around the divs I want to be positioned absolutely. I didn't do that at first cause I always want to try to style the elements I have and add new ones only if really necessary.
You should make the wrapping divs a relative position so the absolute position will apply on inner elements:
position: relative;
jsFiddle Demo
Note that you can't give a table-cell a relative position for it's not standardized and will work unexpectedly.
For further reading:
position - CSS | MDN
Learn CSS Positioning in Ten Steps
How can I make a child div the width of the parent div when the child has position:absolute and some padding?
Here's the example. I want the child to not extend past the parent.
http://jsfiddle.net/usv9R/
http://jsfiddle.net/usv9R/1/
If you manually set top/left/right/bottom, without setting the width explicitly, it will expand to the parent. I've set this to 12px for all which gives the padding effect
Note the position:relative; on the parent, otherwise the child will be absolute to the parent's parent and so on.
This has one unfortunately consequences. One, which you may already be aware of, the parent won't expand to fit the child.
Also, it just occurred to me that you maybe wanted the padding on the child instead? You can do that just fine, but be forewarned that given the above limitation, the parent won't necessarily encompass the child with too much vertical padding.
Add position:relative to the parent, so that the child uses it for relative sizes rather than the page.
Then add left:0px;right:0px; to the child, and remove the width so it calculates it itself.
like this: http://jsfiddle.net/usv9R/10/