"Use the rest of the width" layout using CSS

[ddaiker]

I'm attempting to move to CSS layouts and away from table layouts as much as I can. But I can't figure out how to get an element to use "the rest of the width". Here is what I would do with a table.

<table style="width: 100%">
 <tr>
 <td>Hello World</td>
 <td><input id="txtOne" style="width: 100%;"></input></td>
 </tr>
<table>

This gives me a label that is as small as possible and then a text box that fills up the rest of the width of the the table's containing element.

I've tried lots of various combinations of nested divs and spans using various css display values but I can't get the same effect.

I need this because I don't know the width of my containing element but I want to maximize the size of my text box.

I know this is probably one of those "duh", I should have thought of that things but I can't figure it out.

[cmarshall]

Hi, and welcome to WebmasterWorld!

I'd be interested in knowing this as well. Using block-based structure (

<div></div>

), I have had to do the same kind of thing, but I have specified the sizes.

<table></table>

does give you this, and you may not be able to reproduce it exactly with block-based structure.

[Xapti]

Off the top of my head, the way to do this would be to set the input to display:block, and for the label to be set to float:left. I think you will need to fix the width of your label(s) though, and have the input have margin-left of the width of the label.
Uhh... problem is, which I guess you maybe knew about, (it would have been helpful to mention!) is that the input element can't really be set to display:block for some reason.
Hence, I just wrapped the input in a form, and it then works.
Here's an example:
<div style="float:left;width:8em">labeeeel1</div><form style="display:block;margin-left:8em"><input style="width:100%"></form>

[edited by: Xapti at 4:27 am (utc) on Sep. 15, 2007]

[cmarshall]

<div style="float:left;width:8em">Label:</div><form style="display:block;margin-left:8em"><div><input style="width:100%"></div></form>

(I added a

<div></div>

inside the

<form></form>

so it can validate for me).

The problem with this is that the label has to be an arbitrary size. Your example has a fixed label size.

It is an improvement over what I've done in the past, as it does allow me to specify an arbitrary size for the

<input>

.

It's making both of them arbitrary that's an issue.

In some cases, a

<table></table>

is your only choice. There's nothing wrong with using one when that is the only viable remedy. In this case, it doesn't look like it needs to be a big deal to add a small

<table></table>

here and there as needed.