overflow content in variable dimensions

[Jack McKalling]

Hey.I have come to a complex looking situation, that seems to be impossible.I have a content part on the page, that needs an overflow. However, the dimensions (width and height) must be dynamic (100% of the parent).The problem in this, is that an overflow seems to only work on an element with fixed dimensions.I have a table with two columns. The left column is a navigation panel, and the right is the content. Lets say the left column has a fixed width, where as the whole table is 100% of the window. This results the right column to receive the leftover of the width. Inside this right column will be put in an element with the overflow:auto applied to it.This element will, however, need a fixed with for the overflow, and as its parent has already a dynamic width, 100% will confuse the overflow, resulting in the overflowing element in the content cell to not being clipped at all.My question is, I want the content to be clipped within the dynamic dimensions (the leftover of the width) for the right column. Is this possible, without having the overflowing element in the contentcell to need a fixed width in pixels?See this code for example:

<table style="width:300px">	<tr>		<td style="width:100px"></td>		<td>			<div style="width:100%; overflow:auto">				This text should be clipped within 200px width, but will take space from the 100px left instead			</div>		</td>	</tr></table>

Any help would be greatly appreciated :)PS: the width alone is difficult, let alone the height.

[Ingolme]

Well, apparently, when doing tests with the table I find it ignores the width attribute as long as some horizontal text takes more space than it should (like a particularily long word).You really should change to CSS based layouts instead of tables, you wouldn't have this kind of trouble with this type of layout. Besides, it's bad practice to use tables for layout, they're intended for tabular data (for example: the multiplication table).Here's a really simple example of what you're trying to do done with a CSS based layout:CSS:

#container { width: 300px; }#nav { width: 100px; float: left; }#content { margin-left: 110px; overflow: auto; }

HTML:

<div id="container">  <div id="nav">Some text</div>  <div id="content">This text will overflow if it's too long: ********************************************************************** </div></div>

[Jack McKalling]

You really should change to CSS based layouts instead of tables, (...) it's bad practice to use tables for layout, they're intended for tabular data (for example: the multiplication table).

I find that rather nonsens I disaggree. There is no manner for placing things next to eachother that is the same in all browsers (float is NOT), other than by a table, so it is not particular a bad practice. I am not discussing about using tables or CSS, but asking for a way to get this table to do something anyhow. If I wanted to use CSS, I would have done that. I am aware of the pros and cons for tables and CSS ways, but I just want to do this with a table.Using float will not work cross-browser, particular for placing several things next to eachother.Tables do work for me in this situation, could I get it to work like this?[Edit:]If there are other elements (with or without certain CSS) that do place things horizontally, like tables do, that works nicely in all browsers exactly the same, I would be fine with that too.But float is just a pain, in IE it will take up space of its own next to it, but in FF it will take up space from the element that it is floating in. Float literally means that the floating element will be placed INside another, to the left or right. IE just interpretes it alternatively. For this reason I will not use float for layout. In fact,float is less intended for this use than tables. It is for images inside P or DIV elements.

[Jack McKalling]

I have been messing with this thing again, and have come up with another conclusion.If the content of the overflow-element is one wide word, IE treats it differently when it is just many words (wordwrap is issue here).This I hadn't noticed before.If I just make the overflow-element 100% of the right column, and make its content overflow with word wrapping, it doest exactly what I want. The width of the right column was automatically calculated, and used for the 100% width of the overflow-element inside, which did clip and show scrollbars.However, if wordwrap is not used (i.e. with a very long word), the overflow does not work properly.My initial problem has now been solved, but is evolved into this new one: what can I do with the automatic wordwrap when using long words? Wordwrap doesn't wrap long words... Can I force the browser somehow, within the overflow?It is just, that I want to give my overflow first priority, nothing may wide it out, not the content, and not the not-working-wordwrap. How?[Edit:]Hmm, adding the statement table-layout:fixed to the table seems to do the trick.. thanks for helping me, I found it myself lol