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.
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.
I start of with a empty div(parent). and append a div to it which is set the width & height using the css method in jquery. but the parent div doesn't grow(i checked in the inspect of firebug console in chrome). Do I have to compute the the width + margin of the appended and set the dimenstion of the parent div
and a supplement would what happens to the when you set the parent width and height does it make the child width and height same...I would like to how the appended div setting height affect the children/parent...if there is some link which would explain this..
how would the width behave with reference to relative,absolute positioning and inheriting property
Thanks
The height of parent div would change when the height of child div is changed.
But you'll have to manipulate the width of parent div when you change the width of child div.
Here is an example.
Relative or absolute positioning would change the Positioning but not the height or width: check this
But if you change the position of child div parent div would not move with it: like this
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 a div that must be set to overflow:hidden, and I want one of its child divs to scroll through content; however, no matter how I play with the overflow on the child, it won't scroll. How can I override the inheritance?
You likely have not specified a height on the inner div.
Without height on the div its height will be the height of its content and hence it will never need to scroll. Of course with it being contained in an outer div that does have height and overflow:hidden its content disappears under the border of the outer div.