How to have fixed height DIV where content can expand DIV without scroll bar

I have a problem which I have boiled down to its basic form.

I would like to set a fixed height for a DIV tag but if the content within the div exceeds the height of the DIV tag then I want the DIV tag to expand. I DO NOT want a scroll bar to appear.

I have set up the following 3 examples in which I make use of the CSS overflow attribute. The DIV tag is set to a height of 200 pixels.

1. No overflow > http://www.squareshape.co.uk/divoverflow1.htm

2: With overflow:visible > http://www.squareshape.co.uk/divoverflow2.htm

3. With overflow:auto > http://www.squareshape.co.uk/divoverflow3.htm

Any help would be appreciated.
mike99cAsked:
Who is Participating?
 
gxp071Connect With a Mentor Commented:
if you change height to min-height in the css for example 1 it will do what you want.

However the css option of min-height is not supported by ie 5 or 6.

You can find more info on the related css hacks that make ie6 behave below.

http://www.greywyvern.com/code/min-height-hack

Hope it helps.
0
 
mike99cAuthor Commented:
Thanks qxp071,

It works great. I actually found a better min height hack which only involves a CSS hack rather than the CSS and HTML hack in your example.

http://www.dustindiaz.com/min-height-fast-hack/

I just tried it out and it works in IE5.5 and IE6.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.