16 replies [Last post]
testing
Offline
newbie
Last seen: 13 years 1 day ago
Joined: 2009-07-04
Posts: 2
Points: 0

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>

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 33 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

testing
Offline
newbie
Last seen: 13 years 1 day ago
Joined: 2009-07-04
Posts: 2
Points: 0

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.

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 31 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

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.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 33 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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:&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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

BillysProgrammer
BillysProgrammer's picture
Offline
Regular
Canada
Last seen: 12 years 50 weeks ago
Canada
Timezone: GMT-4
Joined: 2009-07-06
Posts: 11
Points: 0

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 33 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not to mention the fact that

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

Really :?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 33 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Yes http://www.w3.org/TR/htm

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 33 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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 your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 11 years 33 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

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.

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

ljbailey wrote:If the input

ljbailey wrote:

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?

Quote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me