Radio Buttons and Labels Lineup Horizontally

Question

Mike_H 0 Light Poster

14 Years Ago

I am trying to get two radio buttons and their labels to lineup next to each other horizontally. I have tried various CSS code to do so but it never works correctly. The label for the second button is dropping down below its' radio button.

Below is code for sample form and CSS. Can someone help me out?
Thanks in advanced.

Form Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
	<title>Registration Form</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>
	<div id="page-wrap">
		<div id="contact-area">
			<form id="registerForm" method="post" action="#">
			
				<label for="FName">First Name:<span class="red">*</span></label>
				<input type="text" id="FName" class="required" name="FName" size="30" maxlength="30" tabindex="2" />
				<br>
				<label for="LName">Last Name:<span class="red">*</span></label>
				<input type="text" id="LName" class="required" name="LName" size="30" maxlength="30" tabindex="3" />
				<br>
					
  <span id="label_credit">Are you taking this course to receive credit with the Office of Catechesis?</span>
         
  <label for="no">No</label>
  <input type="radio" name="credit" id="no" />
  <br />
   <label for="yes">Yes</label>
  <input type="radio" name="credit" id="yes" />
  
	 <div id="submit">
     <input class="submit" type="submit" value="Submit"/> </div>
  <br />

 </form>
</div>	</div>
</body>
</html>

CSS Code:

body {
	font-size: .65em;
	font-family: Helvetica, sans-serif;
	background: black;
}

p {
	font-size: 1.3em;
	margin-bottom: 15px;
}

#page-wrap {
	width: 60%;
	background: #FFFFF0;
	padding: 20px 20px 20px 20px;
	margin: 2px auto;
	min-height: 200px;
	height: auto !important;
	text-align: left;
}

#contact-area {
	width: 800px;
	margin-top: 25px;
}

#contact-area input {
	padding: 5px;
	font-family: Helvetica, sans-serif;
	font-size: 1.6em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	text-align: left;
}

#contact-area input:focus {
	border: 6px solid #ccc;
}

#submit {
	padding-top: 50px;
	width: 300px;
	text-align: center;
	}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.4em;
}

#label_credit {
	float: left;
	text-align: left;
	width: 90%;
	padding-top: 5px;
	font-size: 1.4em;
	padding-left: 20px;
}

web-design

3 Contributors
5 Replies
637 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by Mike_H

All 5 Replies

phploveisgood 0 Newbie Poster

14 Years Ago

Try this

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Registration Form</title>

</head>

<body>

<label for="FName">First Name:<span class="red">*</span></label>

<br>

<br>

<span id="label_credit">Are you taking this course to receive credit with the Office of Catechesis?</span>

<br />

</form>

</div> </div>

</body>

</html>
programming-php

luap599 0 Newbie Poster

14 Years Ago

Why leave out the

<html>

tag in the page header. I understand good coders pick up these silly typo's but you should be more considerate for newbies.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Mike_H 0 Light Poster · Answer 1 · 2010-01-02T22:44:31+00:00

phploveisgood,

Taking the break out forces the the option buttons next to each other but the "Yes" label is still under the "No" label on the left and not next to its' option button.

Mike_H

Try this
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
<div id="contact-area">
<form id="registerForm" method="post" action="#">
<label for="FName">First Name:<span class="red">*</span></label>
<input type="text" id="FName" class="required" name="FName" size="30" maxlength="30" tabindex="2" />
<br>
<label for="LName">Last Name:<span class="red">*</span></label>
<input type="text" id="LName" class="required" name="LName" size="30" maxlength="30" tabindex="3" />
<br>

<span id="label_credit">Are you taking this course to receive credit with the Office of Catechesis?</span>
<label for="no">No</label>
<input type="radio" name="credit" id="no" />
<label for="yes">Yes</label>
<input type="radio" name="credit" id="yes" />
<div id="submit">
<input class="submit" type="submit" value="Submit"/> </div>
<br />
</form>
</div> </div>
</body>
</html>
programming-php

Mike_H 0 Light Poster · Answer 2 · 2010-01-03T12:13:38+00:00

Why leave out the
<html>
tag in the page header. I understand good coders pick up these silly typo's but you should be more considerate for newbies.

Thanks for pointing that out. I had ran it through a checker to make sure everything was OK as I had pared down the original page for brevity sake before posting here. But the checker and I missed it.

Mike_H 0 Light Poster · Answer 3 · 2010-01-14T12:32:39+00:00

I have found the answer somewhere else while doing another search.

You put the whole line within the Label tag.
In my case it would be

<label for="no">No&nbsp;<input type="radio" name="Credit" id="no" VALUE="no" class="required" /></label>
<label for="yes">Yes&nbsp;<input type="radio" name="Credit" id="yes" VALUE="yes" /></label>

Thanks to all who tried to help.

Mike_H

Radio Buttons and Labels Lineup Horizontally

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers