Float property problem

Question

I have a div inside another div
The pearent div is NOT floated (and has height auto)
When i apply float to the inside DIV it behaves as if it is not inside the pearent DIV
is this normal?
if yes
how do i float objects inside a non-floated pearent div with auto height?

Answer 1

When i apply float to the inside DIV it behaves as if it is not inside the pearent DIV
is this normal?
Yes. What is happening is due to the nature of floats.  When you float an object it is removed from the normal flow of the page.  This means that its parent container will suddenly lose sight of that object as a descendent element.  This usually causes the parent to collapse to the height of its non-floated content, and if there is none, the parent container could collapse all the way down to a thin line.  The floated element will appear to be OUTSIDE of the parent and for many purposes, it *is* outside the parent (CSS will still cascade into it properly though).
if yes
how do i float objects inside a non-floated pearent div with auto height?
Auto height is misleading in that it's the default.  Assigning NO height is the same as assigning auto height.  It really does nothing for you and is usually therefore both redundant and unnecessary.  What you must do to 'keep the descendent element in the parent' is one of these three things (haven't we been through these with you before?):
1.  Assign a width to the parent element and float it (a floated element will always contain its descendent floated elements).
2.  Apply an overflow:hidden style to the parent (this forces the parent to acquire a new block formatting context, and thereby contain its descendent floats).
3.  Clear the floats before closing the parent tag (perhaps with something as simple as '<br style="clear:both;">'.
Make sense?