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.
Related
I have tried a dozen different solutions and nothing seems to work.
http://betelec.ergonomiq.net/societe/offres-d-emploi
On the page above, I want the teal background of the left sidenav to extend to the height of the white container around it.
The white container gets its height defined by the height of the largest child div (in this case, the mainbody).
I have tried setting the sidenav's div height to auto, but the div remains fixed height. If I set the div to a very large number like 10000px and have overflow hidden, nothing gets hidden.
I am completely at a loss.
Set parent element to position: relative; and then the child element to position: absolute; height: 100%;
Live example.
http://jsfiddle.net/pQdAr/
It looks like your left sidebar is positioned by float:left.
The following post may help you. How to match height of floating sibling divs
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.
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.
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/
I have a parent div and a child div. The parent div has a border-width property, but unfortunately that border-width is blocking part of the child div from being shown. The border-width property of the parent div cannot be changed. How can I get the child div to show up above the parent div's border?
Should note that the parent div has position: absolute applied, the child div does not have position applied in the CSS, and only the left and right edges of the child div are not shown, since only the border-left and border-right of the parent div are set.
See example: http://jsfiddle.net/LGR8w/
Once the elements are positioned, you are able to make the child div overlap the parent's border instead of simply expanding the parent to fit the content. (though why you want to do that is beyond me).
EDIT:
If I'm wrong, could you please explain to me why you want to make the child and parent content overlap rather than simply making the parent expand to properly fit the child? Unless this is for a stylistic overlapping design, I don't see why this is necessary.