I have two divs inside a parent div that I'd like to be relatively positioned. The only thing is that I'd like for one div to fill up 100% of the parent and to overlap the second div, which I'd like to fill up 50% of the parent, but be right aligned. If I decrease the width of the first div, then, the second div would become visible without ever having to be hidden.
How can it be done?
Can't be done with relative positioning, it'll have to be absolute:
http://jsfiddle.net/WKJwk/
Related
I have a parent div that has a bunch of child divs inside it. I want the child divs to be horizontally laid out beside each other. Which means the parent div can not be set to an exact width amount as the image amount will change all the time. So I presumed setting the parent div to width:100% then the children div items inside it I would float:left.
It will only work if I give the parent div a set width that matches the width of all the child divs inside it. Is there a way to have it 100% and lay the children divs out side by side horizontally inside the parent.
Take a look at this example fiddle - is this what you want?
Essentially, you just need to declare the following on your wrapper div, thats all
#wrapper{
white-space:nowrap;
overflow:hidden; /* whatever suits you - could be scroll as well*/
}
you don't need to float the images, as they are no block-level elements per default.
it is the opposite of this Keeping overflow:hidden really hidden because i need that a child element gets visible although its out of the parent element.
it is a slideshow:
the parent-div (for example 500x250px) has width, height, position:relative (needs this) and left: 15px, overflow:hidden
there are some child-divs with the images (+text) included and a prev/next-div.
the prev/next div have left resp. right -15px. looks quite cool on screen...
but because of the overflow:hidden (plus position:relative) from the parent the half of prev/next-div isn't visible
http://imageshack.us/photo/my-images/857/lookactually.png/
http://imageshack.us/photo/my-images/33/shouldlook.png/
A child of an overflow:hidden element can never be visible outside it's parents' box(these are the rules)
to get around this you could place the navigation outside the overflow:hidden element or you could just increase the height of the parent div to accommodate the navigation.
So I have a wrapper div with relative position,
to the bottom of it there is another absolute div which should be on top of it,
another child of the relative div wrapper is the actual content div, which does not have position set.
Now what happens is that the absolute div gets on top the content.
I can't use z index because the content div has no position...
Is there any work around for this?
Z-index can be applied to any element with a relative, absolute or fixed position.
Set the div's position to relative (you don't have to set top or left) and then set the z-index.
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 want to increase the size of the outter div when the height of the inner div increases.
height:auto seems to be working only when the contents are added its expanding.. it doesnt seems to be expanding when the inside div height is more.Is there any solution for this in css?
Try to put overflow: hidden in the parent div or otherwise float it. Surely you have your inner div floated and then parent div doesn't consider it to expand its height. If this is the case, both solutions should work.