I have an image with css "float" set to "left", inside a "div" element. Even though the position is relative, the image does not force the height of the div to increase, and thus the image sticks out over the bottom of the div. How can I fix this?
Set the overflow property for div to hidden or auto.
See http://www.quirksmode.org/css/clearing.html
Related
i've created a CSS Desk example to help with my question.
I have an outer div, .mainPage and it has a child div, .content. When I set .content's top margin to any size, .mainPage moves with the content.
I don't want that to happen, I want .mainPage div to stay at the top above the header, and the content to start 160px down, which is below the header.
The header is fixed so that only the content moves, to give the really nice effect of the background.
If you change margin-top on the content element to padding-top, the background on .main Page will go below the header. Is that the effect you are going for?
Also, just to note, you don't have a position of relative, absolute or fixed set on .mainPage, so z-index won't work.
I have a question about margin in CSS. I have a DIV element, which has an image for background. Inside that DIV I have another DIV. I want this DIV inside to be 200px from the top. But, when I do that, the outside DIV also moves down for 200px. Why is that and how to keep the outside DIV on top?
Set padding-top on your outside div.
For an detailed explanation to your problem see here.
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.