Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can I put 2 labels and text boxes on one line?

Status
Not open for further replies.
peterv12

peterv12

Technical User
Dec 31, 2008
108
US
I am creating a form with input boxes. I want to have a label, followed by an input box, followed by a 2nd label, followed by a 2nd input box, all on one line. I have code which will put one label followed by two input boxes on one line, and the 2nd label appears on the next line. I haven't been able to figure out how to put the 2nd label between the two input boxes. Can anyone show me how to do this?

Code: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en-us">
  <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/css/form.css" />
  </head>
<body>
<form name="form1" method="post" action="leads_process_page.php">
<div id="header">
<center>
<h2>XXXXXXXXXXX.net</h2>
<em>PHP Testing</em>
</center>
</div>
<div id="main">
    <fieldset><b><em><legend>Lead Information</legend></em></b>
      <div class="required">
        <label for="company">Company Name:</label>
        <input type="text" name="company" id="company" class="inputText" size="25" maxlength="100" value="" />
      </div>
      <div class="required">
        <label for="contact">Contact Name:</label>
        <input type="text" name="contact" id="contact" class="inputText" size="25" maxlength="100" value="" />
      </div>
      <div class="optional">
        <label for="street">Address:</label>
        <input type="text" name="street" id="street" class="inputText" size="25" maxlength="100" value="" />
      </div>
      <div class="optional"> 
        <label for="street2">Address2:</label>
        <input type="text" name="street2" id="street2" class="inputText" size="25" maxlength="100" value="" />
      </div>
      <!-- Code between comments is from twoColumn_form.php -->
</fieldset>
</div>
<label for="username">Username:</label>
[b][COLOR=green]<input type="text" name="username" id="username" value="peterv" />[/color][/b]
[b][COLOR=red]<label for="password">Password:</label>[/color][/b]
<input name="password" id="password" value="Password" type="password" />
</form>
</body>
</html>

Basically, what I want to do is have the red hilighted "label" field appear before the green labeled "input" field.

I'm using the following CSS file for the above page, the label format is in red, the input in green:

Code: 
@CHARSET "UTF-8";
/* form.css */

* {
  margin: 0;
  padding: 0;
}
/*
xbody {
	font: 100% arial, helvetica, sans-serif;
}
	
xfieldset {
	padding: 0 1em 1em 1em;
}
	
xlegend {
	padding: 1em;
}
*/
form {
  margin: 0;
  padding: 0;
  font-size: 100%;
  min-width: 560px;
  max-width: 620px;
  width: 590px;
}
[b][COLOR=green]form input {
   border-color: green;
/*  top - right - bottom - left */
  border-width: 2px 2px 2px 2px;
  border-style: solid solid solid solid;
}[/color][/b]
form fieldset {
  clear: both;
  font-size: 100%;
  color: green;
  border-color: orange;
/*  top - right - bottom - left */
  border-width: 2px 2px 2px 2px;
  border-style: solid solid solid solid;
  padding: 0;
  margin: 0 0 0 0;
}

form fieldset legend {
  font-size: 150%;
  font-weight: normal;
  color: BLUE;
  margin: 0 0 0 0;
  padding: 0 5px;
/* border will outline the legend. */ 
  border-color: orange;
  border-width: 1px 1px 1px 1px;
  border-style: solid solid solid solid;
}

/* field label formatting */
label {
	font-weight: bold;
  	float: left;
	width: 15em;        /* Distance from left margin. */
	text-align: right;
	clear: left;
	margin-right: 15px; 
    font-size: 100%; 
}
input {
/* t-r-b-l */
	padding: 0 0 0 0;
	margin: 0px 55px 5px 5px;
}

label u {
  font-style: normal;
  text-decoration: underline;
}

input, select, textarea {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 75%;
  color: blue;
}
option {
	color: green;
	width: 150px;
}

textarea {
  overflow: auto;
}

form div {
  clear: left;
  display: block;
  width: 354px;
  zoom: 1;
  margin: 5px 5px 5px 5px;
/*  margin: 5px 0 0 0; */
  padding: 1px 3px;
}

form fieldset div.notes {
  float: right;
  width: 158px;
  height: auto;
  margin: 0 0 10px 10px;
  padding: 5px;
  border: 1px solid #666666;
  background-color: #8fffff;
  color: #666666;
  font-size: 88%;
}

form fieldset div.notes h4 {
  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;
  padding: 3px 0 3px 27px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #666666;
  color: #666666;
  font-size: 110%;
}

form fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  color: #666666;
}

form fieldset div.notes p.last {
  margin: 0em;
}

/*form div fieldset {
  clear: none;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;*/
}
form div fieldset {
  clear: none;
  border-width: 4px;
  border-style: solid;
  border-color: red;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;
}
form div fieldset legend {
  font-size: 100%;
  padding: 0 3px 0 9px;
}

form div.required fieldset legend {
  font-weight: bold;
}

  form div label {
  font-weight: bold;
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px; 
  margin: 0 0 5px 0;
  text-align: right;
  clear: left;
  margin-right: 0 0 15px 0;
  color: purple;
}
[b][COLOR=red]  form label {
  font-weight: bold;
  display: block;
  float: left;
  width: 130px;
  padding: 0 5px 0 0; 
  margin:  0px 0px 0px 22px;
/*  text-align: right; */
/*  clear: left; */ 
  margin-right: 0 0 15px 0;
  color: cyan;*/
}[/color][/b]
  #tNplabel {
  font-weight: bold;
  display: block;
  float: left;
  width: 130px;
/* padding TOP - RIGHT - ? - ? */  
  padding: 2px 8px; 
/* margin LEFT - RIGHT - TOP - BOTTOM */  
  margin: 0 0 5px 0;
  text-align: right;
  clear: left;
  margin-right: 0 0 15px 0;
  color: green;
}
form div.optional label, label.optional {
  font-weight: normal;
}
form div.required label, label.required {
  font-weight: bold;
}

form div label.labelCheckbox, form div label.labelRadio {
  float: none;
  display: block;
  width: 200px;
  zoom: 1;
  padding: 0;
  margin: 0 0 5px 142px;
  text-align: left;
}

form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {
  margin: 0 0 5px 0;
  width: 170px;
}

form div img {
  border: 1px solid #000000;
}

p.error {
  background-color: #ff0000;
  background-image: url(/images/icon_error.gif);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  color: #ffffff;
  padding: 3px 3px 5px 27px;
  border: 1px solid #000000;
  margin: auto 100px;
}

form div.error {
  background-color: #ffffe1;
  background-image: url(/images/required_bg.gif);
  background-repeat: no-repeat;
  background-position: top left;
  color: #666666;
  border: 1px solid #ff0000;
}

form div.error p.error {
  background-image: url(/images/icon_error.gif);
  background-position: top left;
  background-color: transparent;
  border-style: none;
  font-size: 88%;
  font-weight: bold;
  margin: 0 0 0 118px;
  width: 200px;
  color: #ff0000;
}

form div select, form div textarea {
  width: 200px;
  padding: 0px 3px;
  margin: 0 0 0 0;
}

form div input.inputText, form div input.inputPassword {
  width: 200px;
/*  padding: 1px 3px; */
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

form div input.inputFile {
  width: 211px;
}

form div select.selectOne, form div select.selectMultiple {
  width: 211px;
  padding: 1px 3px;
}

form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  margin: 0 0 0 140px;
}

/* div.submit controls the button line */
form div.submit {
  width: 294px;
  padding: 0 0 0 0;
}

form div.submit div {
  display: inline;
  float: left;
  text-align: left;
  clear: left;
  width: auto;
  padding: 10;
  margin: 0;
}

/* Button Formatting */
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {
  background-color: #cccccc;
  color: #000000;
  width: auto;
  padding: 0 6px;
  margin: 0;
}

form div.submit div input.inputSubmit, form div.submit div input.inputButton {
  float: right;
  margin: 0 0 0 5px;
}

form div small {
  display: block;
  margin: 0 0 5px 142px;
  padding: 1px 3px;
  font-size: 88%;
  zoom: 1;
}

Any and ALL help on this is really appreciated.  I've been banging my head against the wall on this for 2 days!
 
Sort by date Sort by votes
I would think it comes down to whether or not there is enough space to accommodate all 4 elements in the same line.

Judging by your CSS your form is 620px wide, however you are giving your password field a width of 200px each and your labels a width of 130px.

Assuming your username is also 200px in width there just isn't enough space for all them. total space: 130+130+200+200 that's 660px. Your form is only 620px wide.

The last label wraps to the next line.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
vacunita,
I'm relatively new to style sheets, so having you point out that form width mistake is greatly appreciated. I've corrected it by changing the width to 700. That, however, didn't solve the original problem. What seems to be happening is that the fields seem to be displayed in this order:

label input-box input-box
label

What I want is:

label input-box label input-box

If you want to see what the page looks like online, it's at
 
Upvote 0 Downvote
Sorry bout that.

Just remove the float:left; for your label declaration and it should be o.k.

you don't need it since your textboxes aren't floated, and its already an inline element so it will by default just sit next to its preceding element.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Phil, I took your advice, and commented out the float, but that didn't fix the problem.
Code: 
[b]
  form label {
  font-weight: bold;
  display: block;
/*  float: left; */
  width: 130px;
  padding: 0 5px 0 0; 
  margin:  0px 0px 0px 22px;
/*  text-align: right; */
/*  clear: left; */ 
  margin-right: 0 0 15px 0;
  color: cyan;*/
}
[/b]

I uploaded the css file and reloaded the page, and nothing changed. Any other ideas? This one's really got me scratching my head. I'm reading the "CSS The Missing Manual" book hoping to find something in there. Unfortunately, there are no examples in it like what I'm trying to do.
 
Upvote 0 Downvote
That should have worked. Removing the float, and making sure there is enough space to accommodate the elements should have worked.

The error mus have changed, if anything the second textbox should be the one wrapping now.

If that's the case, then its still a space issue: IE doesn't understand max-width. so it just uses your width declaration. which is still too small to accommodate all the elements.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Well then there's something else in all that CSS affecting the labels. I just don't know what it is.

I've removed all your float:left; in practically everything. also removed the display:block; for things that don't need it and it still acting that way.

As a little experiment copy the relevant section outside of the form tags and refresh the page.

You'll see that without the CSS applied to them, they will all be in the same line.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
I do notice that, but do you know how I can get the alignment I'm looking for? I know how to get them in one column, and that looks good, but I have to be able to get a 2 column form. I'll keep banging away. Thanks for taking the time to dig into this.
 
Upvote 0 Downvote
One column?

In the experiment I proposed they'll be:

<label><textbox><label><textbox>

All in the same line.

Not sure what you mean by 2 columns.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Hi peterv,

I have used the following css and it seems to work as you want it.

Code: 
@CHARSET "UTF-8";
/* form.css */

* {
  margin: 0;
  padding: 0;
}
/*
xbody {
	font: 100% arial, helvetica, sans-serif;
}
	
xfieldset {
	padding: 0 1em 1em 1em;
}
	
xlegend {
	padding: 1em;
}
*/
form {
  margin: 0;
  padding: 0;
  font-size: 100%;
  /*min-width: 560px;*/
/*  max-width: 620px; */
  /*max-width: 700px;*/
  width: 700px;
}
form input {
border: 2px solid green;
}
form fieldset {
  clear: both;
  font-size: 100%;
  color: green;
  border-color: orange;
/*  top - right - bottom - left */
  border-width: 2px 2px 2px 2px;
  border-style: solid solid solid solid;
  padding: 0;
  margin: 0 0 0 0;
}

form fieldset legend {
  font-size: 150%;
  font-weight: normal;
  color: BLUE;
  margin: 0 0 0 0;
  padding: 0 5px;
/* border will outline the legend. */ 
  border-color: orange;
  border-width: 1px 1px 1px 1px;
  border-style: solid solid solid solid;
}

/* field label formatting */
label {
	font-weight: bold;
	width: 15em;     /* Distance from left margin. */
	text-align: right;
	margin-right: 15px; 
    font-size: 100%; 
}
input {
/* t-r-b-l */
	padding: 0 0 0 0;
	margin: 0px 55px 5px 5px;
}

label u {
  font-style: normal;
  text-decoration: underline;
}

input, select, textarea {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 75%;
  color: blue;
}
option {
	color: green;
	width: 150px;
}

textarea {
  overflow: auto;
}

form div {
  clear: left;

  width: 354px;
  zoom: 1;
  margin: 5px 5px 5px 5px;
/*  margin: 5px 0 0 0; */
  padding: 1px 3px;
}

form fieldset div.notes {
  float: right;
  width: 158px;
  height: auto;
  margin: 0 0 10px 10px;
  padding: 5px;
  border: 1px solid #666666;
  background-color: #8fffff;
  color: #666666;
  font-size: 88%;
}

form fieldset div.notes h4 {
  background-image: url(/images/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;
  padding: 3px 0 3px 27px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #666666;
  color: #666666;
  font-size: 110%;
}

form fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  color: #666666;
}

form fieldset div.notes p.last {
  margin: 0em;
}

/*form div fieldset {
  clear: none;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;*/
}
form div fieldset {
  clear: none;
  border-width: 4px;
  border-style: solid;
  border-color: red;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;
}
form div fieldset legend {
  font-size: 100%;
  padding: 0 3px 0 9px;
}

form div.required fieldset legend {
  font-weight: bold;
}

  form div label {
  font-weight: bold;
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px; 
  margin: 0 0 5px 0;
  text-align: right;
  clear: left;
  margin-right: 0 0 15px 0;
  color: purple;
}
  form label {
  font-weight: bold;
 /*display: block;*/
/*  float: left; */
  width: 130px;
  padding: 0 5px 0 0; 
  margin:  0px 0px 0px 22px;
/*  text-align: right; */
/*  clear: left; */ 
  margin-right: 0 0 15px 0;
  color: cyan;*/
}
  #tNplabel {
  font-weight: bold;
  display: block;
  float: left;
  width: 130px;
/* padding TOP - RIGHT - ? - ? */  
  padding: 2px 8px; 
/* margin LEFT - RIGHT - TOP - BOTTOM */  
  margin: 0 0 5px 0;
  text-align: right;
  clear: left;
  margin-right: 0 0 15px 0;
  color: green;
}
form div.optional label, label.optional {
  font-weight: normal;
}
form div.required label, label.required {
  font-weight: bold;
}

form div label.labelCheckbox, form div label.labelRadio {
  float: none;
  display: block;
  width: 200px;
  zoom: 1;
  padding: 0;
  margin: 0 0 5px 142px;
  text-align: left;
}

form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {
  margin: 0 0 5px 0;
  width: 170px;
}

form div img {
  border: 1px solid #000000;
}

p.error {
  background-color: #ff0000;
  background-image: url(/images/icon_error.gif);
  background-repeat: no-repeat;
  background-position: 3px 3px;
  color: #ffffff;
  padding: 3px 3px 5px 27px;
  border: 1px solid #000000;
  margin: auto 100px;
}

form div.error {
  background-color: #ffffe1;
  background-image: url(/images/required_bg.gif);
  background-repeat: no-repeat;
  background-position: top left;
  color: #666666;
  border: 1px solid #ff0000;
}

form div.error p.error {
  background-image: url(/images/icon_error.gif);
  background-position: top left;
  background-color: transparent;
  border-style: none;
  font-size: 88%;
  font-weight: bold;
  margin: 0 0 0 118px;
  width: 200px;
  color: #ff0000;
}

form div select, form div textarea {
  width: 200px;
  padding: 0px 3px;
  margin: 0 0 0 0;
}

form div input.inputText, form div input.inputPassword {
  width: 200px;
/*  padding: 1px 3px; */
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

form div input.inputFile {
  width: 211px;
}

form div select.selectOne, form div select.selectMultiple {
  width: 211px;
  padding: 1px 3px;
}

form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  margin: 0 0 0 140px;
}

/* div.submit controls the button line */
form div.submit {
  width: 294px;
  padding: 0 0 0 0;
}

form div.submit div {
  display: inline;
  float: left;
  text-align: left;
  clear: left;
  width: auto;
  padding: 10;
  margin: 0;
}

/* Button Formatting */
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {
  background-color: #cccccc;
  color: #000000;
  width: auto;
  padding: 0 6px;
  margin: 0;
}

form div.submit div input.inputSubmit, form div.submit div input.inputButton {
  float: right;
  margin: 0 0 0 5px;
}

form div small {
  display: block;
  margin: 0 0 5px 142px;
  padding: 1px 3px;
  font-size: 88%;
  zoom: 1;
}

Steve
 
Upvote 0 Downvote
Note that you have (at least) two seperate chunks of CSS that control the display of labels:
Code: 
/* field label formatting */
[...snip...]

label {
    font-weight: bold;
    width: 15em;     /* Distance from left margin. */
    text-align: right;
    margin-right: 15px; 
    font-size: 100%; 
}

[...snip...]

  form div label {
  font-weight: bold;
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px; 
  margin: 0 0 5px 0;
  text-align: right;
  clear: left;
  margin-right: 0 0 15px 0;
  color: purple;
}
  form label {
  font-weight: bold;
 /*display: block;*/
/*  float: left; */
  width: 130px;
  padding: 0 5px 0 0; 
  margin:  0px 0px 0px 22px;
/*  text-align: right; */
/*  clear: left; */ 
  margin-right: 0 0 15px 0;
  color: cyan;*/
}

[...snip...]
You might want to put some time in to reorganising that CSS and cutting out some of the redundancy.

Secondly, if you want to keep the floated-label-two-column layout, but override it for the username & password line, just give an id to that one label:
Code: 
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="peterv" />
<label id="passlabel" for="password">Password:</label>
<input name="password" id="password" value="Password" type="password" />
Then you can leave the floats in place but add this rule:
Code: 
form label#passlabel {
  float: none;
  display: inline;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
634
3esolar
3
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
214
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top