0

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/

David Andersson
  • 1,246
  • 2
  • 11
  • 17
  • Solution one is definitely the lesser evil, but I think you can do better than it. Can you show what the parent element of `#a` and `#b` looks like from example number 1? Ideally, create a [jsFiddle demo](http://jsfiddle.net/) showing this. – thirtydot May 30 '11 at 14:50
  • You should only use `tables` for tabular data. #1 is better (assuming this is not data that would fit properly in a table). Extensive reasoning for why `div`s better than `table`s: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Jason Gennaro May 30 '11 at 14:50
  • What kind of layout are you trying to achieve? The two solutions do different things. One is fixed while the other is fluid. – melhosseiny May 30 '11 at 15:08
  • Thanks. I have updated with a jsfiddle example. – David Andersson May 30 '11 at 15:36

2 Answers2

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>
Community
  • 1
  • 1
Eric
  • 95,302
  • 53
  • 242
  • 374
  • That is a good alternative for option 1. Would you have an idea of how to solve it with setting the 20px width from a div within #a instead? – David Andersson May 30 '11 at 17:15
  • Only specify the width of the div within `#a`? As a floating box, `#a` will expand to fit it's widest child. – Eric May 30 '11 at 18:25
0

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.

Ray
  • 21,485
  • 5
  • 48
  • 64