non-expanding div

[neilkw]

hi, quick one. I hope

I want to type text into a div with a fixed size eg. 200px square. I don't, however want the div to expand when a load of text is entered but rather make sure the text flows down to the line below when the text spans the width of the div. What css do i need to add to the div to achieve this?

Thanks

[jscheuer1]

A 200px square division implies:

<div style="width:200px;height:200px;">whatever content</div>

or equivalent. With those strictures, the division will have only a few basic possible ways to react once the content becomes greater than its capacity to hold it. It can:

1 ) Overflow (visible) - this will display the content but place some of it beyond the edges of the division.

2) Overflow (hidden) - only that portion of the content that fits will be seen.

3) Overflow (scroll) - A scrollbar(s) appear(s) to allow the portion of the division that isn't visible within its configured dimensions to be scrolled into view.

There are variations on each and you can set these using the style attribute:

overflow:hidden;

etc. However, you might prefer to leave one dimension, either the height or the width, unspecified. Then the division can expand in that dimension to accommodate additional content.

Bottom Line: 200px by 200px? - you can only fit so much stuff in there.

[neilkw]

ok, thanks for that. I have made some real progress now. Additionally I am experiencing a font issue with this div now. Text set at .75 ems displays at different sizes via ie, safari and firefox.

Are ems the way forward or should I stick to px text sizes?

[jscheuer1]

When nested, ems are buggy, especially in IE. Also, each browser may see your default font size differently thus making all sizes derived from it different. For the first problem, instead of ems, you can use % sizes. These are equivalent and not buggy when nested in IE. For example .95em is the same as 95%. As for the second problem - the whole point of using relative units for text size is to allow each user to set their browser's view mode (in the view menu) to one that renders the page as they would like to see it. If you cannot trust your users to do this, then don't use relative units for text size but be aware - all browsers save IE can still adjust the font size using the view menu even if they are rendered using pixels.

[Twey]

Does IE have problems with the ex unit?

[jscheuer1]

Does IE have problems with the ex unit?

Yes, it only occurs when resizing text to anything other than 'normal' but the size differential then appears to become exponential rather than linear. Here's where this got discussed to death and here is a Demo, courtesy of Mike (mwinter). The demo only uses ems but, if you substitute exs and double the values (1ex =~ .5em), you get the same results.

[Twey]

Ah, thank you.

[kunal]

can you give me a css & DHTML e books