1

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jake Petroules
  • 23,472
  • 35
  • 144
  • 225
  • Have you tried using a float? If you floated the first TD, it would be only as wide as necessary, but the second would retain full width. However, the second column wraps the first if the first is shorter. – OverZealous Aug 03 '11 at 03:36

1 Answers1

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>
Jake Petroules
  • 23,472
  • 35
  • 144
  • 225
  • 1
    That does indeed work. For the extra information, see my answer here: http://stackoverflow.com/questions/6809079/two-divs-side-by-side-one-100-width-others-width-depended-on-content/6809143#6809143 – thirtydot Aug 03 '11 at 11:42