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;
}

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

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

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.

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.

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

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.