Multiple 100% items on single line?

I might be wrong, but I don't think you can set the width of an input from css like that. It needs to be done from within the element i.e

You can, but that's not the problem. I have the following layout:

+--------------------------------------------------+
| Label (input) Label (input)                      |
+--------------------------------------------------+

I want this layout:

+--------------------------------------------------+
| Label (input___________) Label (input___________)|
+--------------------------------------------------+

But setting the input width to 100% gives me this:

+--------------------------------------------------+
| Label (input____________________________________)|
| Label (input____________________________________)|
+--------------------------------------------------+

I need to inputs to fill up as much space as possible inside a div, but still keep everything on the same line.

You need to think about what you're asking, you want two items to take up 100% of the available space on a line, its just not possible. What you want is for each to take 50% so the 100% total is divided amongst the two.

The only way you can do that is to have two colums, of a set width side-by-side

Well, you could nest each input within its label, then float the label, or try this:

  form p label {
    display: -moz-inline-box;
    display: inline-block;
    width: 49%;
    }
====================
  <form action="#"
        method="get">
    <p><label for="input1">first label:&nbsp;&nbsp;<input type="text"
           name="input1"
           id="input1"
           size="15" /></label> 
       <label for="input2">second label:&nbsp;&nbsp;<input type="text"
           name="input2"
           id="input2"
           size="15" /></label></p>
  </form>

cheers,

gary

Well, with previous poster, many people do not have the new browsers and tend to use a lot of IE, so the browser support for CSS3 gets thrown out the window. Try either floating, or displaying then inline.

None of the suggestions here are css3, and all will work on IE. The only browser that will need a work-around is FF2 with the inline-block version. The work-around was provided. All my examples are tested unless otherwise indicated.

cheers,

gary

Yes, he could do that Gary, but it will look decidedly shoddy because you have no way to set the width of the labels or align them, so they will be all over the place. Not to mention the fact that inputs are not meant to be inside the labels.

I still say the best way is to have two colums, one for the labels and one for the inputs.

Not to mention the fact that inputs are not meant to be inside the labels.

Really :?

Yes

http://www.w3.org/TR/html401/interact/forms.html

Let us turn to §17.9 Labels in the scriptures, where we find this:<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->Verily, it says here, in the book, that the label must have both opening and closing tags, and may contain zero or more bits of data of type inline (%inline is an inline entity), and may not contain another label element. It's in the book¹.

Let us turn now to the definition of the inline entity. Here, it says <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">We can clearly see that the inline entity consists of, among other types, #PCDATA, which is simply parsed text, and %formctrl. You may wrap the label element around form controls such as input. It's in the book.

I leave the definitions of the entities included in %inline as an exercise for the class.

cheers,

gary

¹ With apologies to Professor Irwin Corey.

I never said it was against the rules to put inputs within the label, I just said they are not meant to be and as far as I'm concerned nothing you have said changes my opinion on that.

Why would you say, "… they are not meant to be and as far as I'm concerned nothing you have said changes my opinion on that"? Nesting the form control within the label implicitly links the two. It is an important accessibility function.

While you may refuse to agree with the value of such a linkage, I would really like to know from where you got the idea that it's inappropriate.

gary

If the input is meant to be inside the label tags, then why would you need to bother giving the input an id and marking the label label for= ?

As the example I posted you shows, it makes more sense that you open and close the label and then comes the input. Not least because it gives you much greater control over the style of both the label and the input.

You don't need to on the big four. IE8, FF, Opera, and Safari all support the nested connection without using the for attribute. Older IEs don't, and some screen readers may not support it, so it's still a good idea to use it anyway. So what?

OTOH, by nesting you can treat the pair as a unit, and still style each separately. Nesting does not preclude styling the elements separately.

gary

Hmm, there are times when one nests there are times that one doesn't, both are correct approaches depending on circumstances take the case of radio inputs where one can place the label text after the input and before the closing label tag and in some senses this can give greater control than keeping the pairs separated.