Member Avatar for Mike_H

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;
}
  • 3 Contributors
  • 5 Replies
  • 660 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Mike_H

Dani AI

Generated

Short recap: the behavior came from mixing floated/blocked labels and manual line breaks so the radios and label text were no longer in the same inline flow. helped by removing the stray <br/>s and caught a structural HTML typo; solved it by coupling each radio with its label. Below are two clear, modern approaches (CSS-first) that avoid the float/width fragility and keep the radio and its label aligned.

Use inline-flex per-choice (robust, easy spacing)

<div class="choice">
  <input id="credit-no" name="credit" type="radio" value="no">
  <label for="credit-no">No</label>
</div>
<div class="choice">
  <input id="credit-yes" name="credit" type="radio" value="yes">
  <label for="credit-yes">Yes</label>
</div>
.choice { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; }
.choice input { margin: 0; }

Inline-block alternative (works without flex)

label.radio-label { display: inline-block; vertical-align: middle; margin-right: 1rem; }
input[type="radio"] { vertical-align: middle; margin-right: .25rem; }

Troubleshooting and accessibility notes:

  • Prefer matching id + for or wrapping for clickable targets; keep ids unique.
  • Remove floats and fixed label widths unless you need columns; they force wrapping.
  • If using inline-block, set vertical-align: middle on both the input and label to avoid baseline shifts.
  • Use the browser devtools to inspect computed display, float, and vertical-align and to quickly toggle offending styles.
  • Validate markup (missing root tags can trigger quirks mode and strange layout).

Either method above keeps each radio/label pair together, is keyboard-friendly, and avoids the brittle layout that caused the label to drop below the input.

Recommended Answers

All 5 Replies

Member Avatar for phploveisgood

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

Member Avatar for Mike_H

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

Member Avatar for luap599

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.

Member Avatar for Mike_H

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.

Member Avatar for Mike_H

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.