Making DIV stretch to fit overflow

I'm really in need of finding a way to make a DIV stretch out so that things don't overflow in the first place. In IE6, the CSS overflow property behaves incorrectly. You can see an example http://www.quirksmode.org/css/overflow.html

What I'm trying to do is emulate this behavior in FireFox and IE7. I'm not concerned with breaking the W3 rules, what I'm concerned with is that it works. Is it possible at all?

 

Correct behavior dictates that a dimensioned element does not] stretch to contain its content. IE6 gets it wrong. IE will not allow overflow of a dimensioned box. There is no fix.

If I've misread your question, please rephrase it for more clarity of purpose.

cheers,

gary

 

You could always try adding "min-height: value;" to your CSS template opposed to just the "height: value;." There's always a fix for everything, there's always a way to get look that you want, even if you have to go about it a different way.

 

IE doesnt recognise min-height or min-width .

 

IE8 does support min-height. I've tested my own website with it. But that's only IE8, I guess they're fighting as hard as they can to keep up with the competition.

 

Thanks, but I'm quite aware that the behavior is incorrect. What I was hoping for was a method for emulating that incorrect behavior. A trick or something, perhaps, if I'm lucky, a correct method for accomplishing such behavior.

 

Ah, OK. Given that you want a box, <div id="stretchybox"> e.g., to have a height, but will grow with additional content;

#stretchybox {
  min-height: 100px;
  }

* html #stretchybox {
  height: 100px;
  }

Code (markup):

That will do for modern browsers and IE7. For IE6,which doesn't support min-anything, we use the "star html hack". Only IE6 thinks there is an element for html to descend from, so only IE6 sees "* html".

cheers,

gary

 

Try putting the div in a container div, then float all divs left. I heard somewhere that that worked but haven't yet had a chance to try it out so apologies if it doesn't!

 

I know this is an old thread - however it was something I needed to figure out and I found this through a google search, so I hope this helps others:

DIVs with min- stylings will stretch to content, however, when accessing the DOM values of the div will return null values for width and height. In other words, you can't see the dynamic width and height of the div.

In order to detect the Divs height and width, wrap a table around it. the table will stretch with the div and its offsetWidth and offsetHeight will be accessible through javascript.

why is this useful? well one example is you can resize outer divs, particularly ones that are absolute and float above the application, to surround its content instead of being a tiny square in the upper left corner of the dynamic content.