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