Is it possible to have multiple items expand to fill a single DIV without overflowing onto the next line? In the below example I'm looking to have two sets of labels and inputs, with the inputs expanding to max width without pushing content onto the next line.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> .single-line { background-color: red; width: 600px; margin-bottom: 60px; } .w100 input { width: 100% } </STyle> <body> No Input Width: <div class="single-line"> <label>test</label><input/> <label>test</label><input/> </div> Input Width 100% <div class="single-line w100"> <label>test</label><input/> <label>test</label><input/> </div> </div> </body>
I might be wrong, but I
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
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 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
The only way you can do that is to have two colums, of a set width side-by-side
Well, you could nest each
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: <input type="text" name="input1" id="input1" size="15" /></label> <label for="input2">second label: <input type="text" name="input2" id="input2" size="15" /></label></p> </form>
cheers,
gary
Issues
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
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 this, but
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
Not to mention the fact that inputs are not meant to be inside the labels.
Really :?
Yes http://www.w3.org/TR/htm
Let us turn to §17.9 Labels
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 book1.
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
1 With apologies to Professor Irwin Corey.
I never said it was against
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
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
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.
ljbailey wrote:If the input
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= ?
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?
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.
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
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.