CSS Height Issues


when in doubt, leave height out
This box has a width of 200px but no height. Therefore it's as tall as it's content.
Don't even get me started about trying to do height with %...you can do it when you have a box in a box or if you set the height of html/body...but it gets ugly quick especially in FF.
This box has a width of 200px and a height of 200px.
This box has a width of 200px and a min-height of 200px. You'll see this doesn't work in IE6, but does in IE7

This box has a width of 200px and a height of 250px, but much more content than 200px. This will look the "same" in IE7 and FF, but in IE6 the div will stretch.

Look and see what happens in FF and IE. Look and see what happens in FF and IE. Look and see what happens in FF and IE. Look and see what happens in FF and IE. Look and see what happens in FF and IE. Look and see what happens in FF and IE.

This box has a width of 200px but no height. There is a 250px tall shim div floated to the left and a div that clears the shim at the bottom both the shim and clear have heights/width set so they'll be minimally invasive...this simulates min-height for IE6 (and other older browsers)

This box has a width of 200px but no height. There is a 250px tall shim div floated to the left and a div that clears the shim at the bottom both the shim and clear have heights/width set so they'll be minimally invasive...this simulates min-height for IE6 (and other older browsers).

There's extra text here so you can see that the box can grow beyond the shim. There's extra text here so you can see that the box can grow beyond the shim. There's extra text here so you can see that the box can grow beyond the shim. There's extra text here so you can see that the box can grow beyond the shim. There's extra text here so you can see that the box can grow beyond the shim.