Question

Most table markup can be translated to CSS. However, here’s one situation I can’t find an exact CSS translation for. Basically, two columns, where the left column expands to minimum width required to contain its content, and the second column fills the rest of the screen. Is this even possible in CSS?

<table width="100%">
    <tr>
        <td>This will expand to the minimum it needs.</td>
        <td width="100%">This cell tries to get as much width as it can.</td>
    </tr>
</table>

Answer 1

I just thought to try this, which appears to work but I don’t know if there are problems with this (such as browser compatibility). If you can provide a better solution or even the same solution with additional info I’ll accept your answer.

<div>
    <div style="float: left;"></div>
    <div style="overflow: hidden;"></div>
</div>