DOM filled Div expands beyond it's set width

[NooK]

I am going crazy with trying to get a div which is filled with a table using javascript dom functions to hold a certain size.

The div in question is

<DIV id="some_div" STYLE="width=200px;visibility:hidden;position:absolute;background-color:white;layer-background-color:white;word-wrap: break-word;"></DIV>

Then through DOM functions I fill it with a table and elements. I won't post the entire dom code cause it's long but here's a snippet of the table part

var theTable = document.createElement('table');
theTable.setAttribute('width','100%');
theTable.setAttribute('align','left');
theTable.setAttribute('valign','top');
theTable.setAttribute('frame','box');
theTable.setAttribute('rules','all');
theTable.setAttribute('border','1');

The reason I use absolute positioning is because I use a functions to place the div next to an anchor (A button) in the page.

My problem occurs when I do a loop function to add buttons to a TD in the table and the div just keeps growing forever to accomodate all the buttons in 1 line rather than sticking to the set width of the div and start putting the buttons in the next line

The for loop code snippet is shown below

...
var buttonTR = document.createElement('tr');
var buttonTD = document.createElement('td');
buttonTD.setAttribute('align','left');
buttonTD.setAttribute('colSpan','2');
buttonTD.style.paddingTop = '10px';
buttonTD.style.paddingLeft = '10px';
buttonTD.style.paddingBottom = '10px';
buttonTR.appendChild(buttonTD);
theTbody.appendChild(buttonTR);
for(i=0; i < (str.length-1); i++)
{
var inputButton = document.createElement('input');
inputButton.setAttribute('type','button');
inputButton.setAttribute('value',str[i]);
inputButton.onclick = function(){surroundText('%'+this.value+'%','');}
buttonTD.appendChild(inputButton);
}
...

Can anybody help me out? I have tried all kinds of different things to make the div stick to the set width but it just ignores it. I am using IE6 and have no need to make it work on firefox or anything else than IE.

[FranL]

IE6 always overrides widths set with the content it contains instead of clipping it. Unless you're using multiple elements which can wrap, which <td>s can't as a <tr> is a block level element.

One solution may be to not put the content into table cells as they always need to reside on the same row. Can I ask why you're using a table? If it's not for tabular data you really shouldn't be using one.

If you must you should set the table to be 200px wide and somehow layout the content in fixed width cells which will wrap inside the table if the content gets too long. It's hard to offer alternative suggestions as I'm not sure of the end result you're trying to achieve.

I don't know if I've explained this very well but I hope you get what I mean.

[NooK]

The reason I used a table is for the layout. I have thought of trying using divs but IE just makes it so complicated with all it's pitfalls on div positioning and such.

I may give a try at divs and see how that pans out but table seems to work fine except for the problem described above.

[FranL]

You really shouldn't use tables for layout but I guess you know that already.

The problem you've encountered doesn't have a solution in IE.

Either use divs or set a fixed number of cells of a fixed width and layout the content in <span>s within those cells. Then, if there are more elements than the <td> width allows the <span>s will wrap within the cell.

Hope this helps anyway.

[NooK]

Thanks, I ended up going for Divs in then end and that worked out well. It's too bad thought that table layouts suffer from such things.