Messy design with divs!

[Jon Lawrance]

On my layouts, I have a div with a height set. When I type text, it goes beyond this height and the dotted line outlining the div area cuts half way through this text. It all looks a bit messy.

What do you do about this? Just alter the height for the div tag? But is this only necessary for design view?

Am I making any sense? lol

Jon

[CletusSpuckler]

Maybe you could just set a min-height instead of height? If you use min-height the div will expand when needed.

[Paul O'B]

But is this only necessary for design view?

If you are talking about DW then it doesn't handle CSS in design view very well at all and you shouldn't really need to be using it. Just use code view and then preview in a real browser.

As mentioned in the post above you shouldn't set heights on elements that you want to expand.

Set a min-height if you need an initial height otherwise let the content dictate the height.

IE6 doesn't understand min-height but you can use this fix:

.elementname{min-height:300px}
* html .elementname{height:300px}

IE6 already treats height as a minimum and will expand as required but needs the height to be hidden from other browsers hence the use of the star selector hack (* html).