What is the least bad: Inline size from code-behind or using tables?

I have these two options to implement a design, that are both extremely 'ugly' from my perspective. There is a third, to change the design slightly, but I like the challenge.

Both a and b have, for the CSS, unknown widths. Within b there will be a float:right element that needs to align with 200px to the right. Due to other implications, it is impossible to absolutely position it.

I need to either:

1. Set widths from code-behind:

<div id="a" style="float:left; width:20px;"></div>
<div id="b" style="width:180px;"></div>

or 2. Force the first table element 开发者_开发知识库to the left through a 100% width:

<table>
 <tr>
  <td id="a" style="width:20px;"></td>
  <td id="b" style="width:100%;"></td>
 </tr>
</table>

Which solution is the lesser evil?

EDIT: See example here: http://jsfiddle.net/bVysU/10/

Neither. Use this instead:

<div id="a" style="float: left; width: 20px"></div>
<div id="b" style="overflow: hidden"></div>

That'll make the second one fill the gap left by the float.

EDIT:

You can do what you asked in the comments like this:

<div id="a" style="float: left">
    <div style="width: 20px"></div>
</div>
<div id="b" style="overflow: hidden"></div>

The div based version is better if you can be certain of the exact widths required for 'a' and 'b', and if you know they can't exceed the width of the container.

However, if there is any chance that the widths will be too large to fit the container, or if there is uncertainty in the size of the elements, you may need to use the table version, to avoid 'b' dropping to the next line.