Question

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/

Answer 1

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>