I've done some searching and could not find a reasonable answer to this
question which I would think would be a common issue:

 

I have a container div with a set width.  Inside this container, I have
two columns (spans).  The right-hand column will have a dynamic width.
So I want the left-hand column (which just holds a text box in my
example) to fill whatever width is left in the container that is not
used by the right-hand column.

 

I tried a couple approaches, neither of which was cross-browser
compatible.  This can be seen at
http://www.freewebs.com/djthorpe/table.html.

 

So the first approach was using display: table-cell, which works well in
Firefox but isn't supported in IE.

 

So the second approach used a float:right for the right-hand column and
a width=100% for the span and text box in the left hand column.  This
worked fine in IE7, but did not work in FF.  In FF, the text box wraps
to the next line.  Now if I reduce the width of the text box to
something like 80%, then the text box and the text appear on the same
line, but what I want is for the text box to fill all the available
space to the left of the right-hand text.

 

Is there something I'm missing here?  I'd like to avoid tables if I can
(and no, I don't want to start up a war here), and I know I could
probably write some funky javascript to determine the remaining width
and set it explicitly for the text box, but if there is something simple
css-wise, I would like to use it.

 

Thanks.

David Thorpe

 

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to