How can div be wider than parent td? - css

I have a div that is wider than its parent td.
How can it be that? The parent has no overflow set so it should really adapt to its content, right?
CSS of parent td:
CSS of child div:
Parent TD is 722px wide:
Child DIV is 960px wide:


You have a table with a set width of 720px. So the unique Table cell present in it, will have a 720px width too.


Using divs inside table rows can result width difference between child and parent.. I am not sure for your case but giving your child div an inherited width can solve it.
#contentslider1{width:inherit}

Related

Overflow: auto always show scroll

I have a parent div, I set max heigth, overflow auto for it. And it have two children div. But I saw the height of parent div equals sum of two children's height.
And It only working when I add padding bottom to Parent div or Last children div.
Thanks for any help.

If the children have in sum bigger height, you should increase the size of the parent.
I recommend you to learn about flex-box, here's a good website for that flex-box

100% parent div with floated left images inside

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.

would a div grow to the size of the appended div

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

auto increasing height issue for nested divs

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.

parent div's border blocking child div

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.

Resources