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/
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 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)
I am trying to show a hidden Div on click event using JS. This Div contains UL which sometimes happens to be of height more than the parent Div. In such cases, parent Div scroll appears.
What I want is to show this list inside a child Div, on top of parent Div. This way the height of list will not affect the UI of page.
Here's the image of what's happening :
Note: Blue border represents the parent Div & list with grey background is inside a child Div.
And I have already tried applying position:relative;z-index:9999;
Make sure to give the parent a zindex (lower) too. See Z-index does not work in ie fir more ideas.
i have created a div of width 615px and 100px height. and i have created about 10 div inside that div of 90 * 80px. now the problem is that when the area of main div ends these small divs inside the main div flows down. i dont want to flows down i want that they will display in a row. if they over flow i will hidden them with using overflow hidden or i will give them horizontal scroll bar.
it looks something like this now
help please
Add another div inside your main div and wrapping the 10 internal divs. Set the width of this wrapper div to the width needed to accomodate all 10 internal divs.
I am currently trying to figure out an way to vertically align an div that is inside an div that has an dynamic height due to it's changing content.
So on this jsFiddle is the setup,
in the left div you have the content that is inside an wrapper element with an fixed width. Next to that div is another div, this is an wrapper for an image and a div element. And on the right is an element with an position absolute.
The idear is that the text "this is an image" is vertically aligned to the middle of the left div which is dynamic. I would like to do it with CSS but it seems impossible...
You can check out this fiddle to get some more info
http://jsfiddle.net/36sfx/2/
It seems that the only way to do it is displaying the div as table-cell. I have tried to solve this problem many times before, and I have read before that there are technicals limitation on this issue.