What I need is very simple, or atleast it should be, but after days of research I've come to resort to asking on stackoverflow if anyone actually has any idea how to do this...
I have 3 columns of content, all of which have expandable content inside. None of the content is very wide, but it is plentiful (once expanded). I need to do it so that when you expand the content in one column, it shrinks the other two columns up to a certain amount, and when you expand the content of two columns it evens out etc. Then, the columns must have a percentage max-size and a min-size (percentage or static), so that when columns expand they don't completely squash the others, and so that I can set a maximum "expandability" to each column. For simplicity's sake, here's an example that would've done the trick if only it worked:
<table width="100%"><tr>
<td style="min-width:200px; max-width:60%;">Col1ExpandableContent</td>
<td style="min-width:200px; max-width:50%;">Col2ExpandableContent</td>
<td style="min-width:200px; max-width:40%;">Col3ExpandableContent</td>
</tr></table>
The above code doesn't work of course, but I'm sure you can imagine how it would work if it did. It's exactly what I need, only that max-width doesn't work with percentages on TDs for some reason. If you need a better visualization I made a fiddle to help illustrate the problem here: http://jsfiddle.net/m5xgcf3s/
I can't just use the min-width's of the cols because of the nature of the contents, they all need to be expandable but only a certain amount. I'm open for any solution and any way of doing this, it doesn't need to be a table (it's just that the TD widths and alignments in a table is perfect by default, if only it supported max-width percentage) or anything as long as it meets the requirements and doesn't use a framework (which hopefully shouldn't be needed anyway). Bonus if it doesn't use javascript at all, but BIG BONUS if you find a solution that allows for a smooth animated size transition while still meeting the requirements. Also bonus if you can explain to me why the heck max-width percentage doesn't work on table cells...
Thanks for the help guys, but I made a script that solved it myself... NO frameworks, NO jQuery, NO hacks, just give the TDs an id and put in this code;
<script type="text/javascript">
window.onresize=function setTDmaxwidth() {
var containerwidth = window.innerWidth;
if (containerwidth >= 400 ) {
document.getElementById("col1").style.maxWidth=( ( containerwidth * 0.6 )+'px');
document.getElementById("col2").style.maxWidth=( ( containerwidth * 0.5 )+'px');
document.getElementById("col3").style.maxWidth=( ( containerwidth * 0.4 )+'px');
} else { }
}
</script>
It simulates a percentage max-width by calculating a fraction of the container width every time its size changes (in this case the container is 100% the width of an iframe). I'll leave the question unanswered though incase anyone comes up with another answer (with or without a table), hopefully one which allows for width transition animations, or a valid explanation as to why percentage max-width's don't work on TDs