Question

I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn’t by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don’t know the width of the content.

Overflow:scroll

does not seem to work with tables. I would be thankful for workarounds/solutions.

<table class="rootTableContent">
<tr>
    <td id="rootTableMenu">             
    </td>
    <td id="rootTableContent">
    </td>
</tr>

Answer 1

The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I’m all for using tables to display tabular data and you’ll see me arguing for them in places that they’re valid, but this is not one of them.

This is easily done with something like this:

<div style="float:left; width: 150px">
   Navigation Code Here
</div>
<div style="float: left">
   Other Content Here
</div>
<div style="clear:both"></div>

Obviously, I’m oversimplifying this solution, you’re going to have more specific code to deal with your layout (need more detail to help more specifically) But, it’s important to use the right tools for the job.