When do nested child elements expand their parent elment?

Question

In many places I have put elmeents nested in other elements. I can\'t deduce when a child element causes the parent element to expand. I don\'t have any code to post as th

Answer 1

Get firebug for firefox. You can browse the DOM (the HTML structure of the page) and it will highlight elements according to how the "browser's eye" sees them (versus how they look aesthetically).

A few general rules of thumb:

• Children will expand their parent's height as long as they're not floated or absolutely positioned, but...
• You can "clear" a series of floated images http://www.quirksmode.org/css/clearing.html to make the parent element expand
• If you use top positioning for a relatively positioned child element, the browser will still see that element in the exact same place. In other words the height of the parent element will stay the same regardless of where the child is relatively positioned to.
• Using positive or negative margins on a child that is display: block will add or subtract height from its parent

Answer 2

The first thing that you should understand is the CSS Box Model. That will help you understand how properties of an element cause it to have the size and dimensions that it has. Another good resource is here.

To answer your main question in the most simple manner (and being very general):

• Block level elements take up as much width as possible (obeying their CSS width rule). Their height is dependent on their content and the CSS height property.
  • Elements like div, p, and ul are all block.
  • These will generally cause your parent element to expand.
• Inline level elements will continue to flow together in a line, filling up only as much width and height as necessary.
  • Elements like span, em, strong are all inline.
  • These will cause your parent element to expand only when there are enough of them on the same line to warrant another line.

There are many ways to tweak the display of elements with CSS.