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.
Related
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
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 have two columns in a center column. (They are all div tags.) When I set the inner divs to float:left, the outer div does not wrap around the inner divs.
Why, and how do I fix that?
set overflow: auto on the outer div.
Why does setting overflow alter layout of child elements?
set overflow:visible for that div, or remove overflow property.
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.