• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 823
  • Last Modified:

Side by side radio buttons

Hi Experts,

How can I make the 2 radio buttons on line 74-81 side by side on the same line?

My HTML is
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>San Joaquin Valley Town Hall</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" href="styles/tickets.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>

<body>
	<header>
		<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
		<hgroup>
			<h1>San Joaquin Valley Town Hall</h1>
			<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
		</hgroup>
	</header>
	<nav>
    	<ul>
    		<li><a class="current" href="index.html">Home</a></li>
    		<li><a href="speakers.html">Speakers</a></li>
    		<li><a href="luncheons.html">Luncheons</a></li>
    		<li><a href="tickets.html">Tickets</a></li>
    		<li><a href="about.html">About Us</a></li>
    	</ul>
    </nav>
	<section>
		<h1>Order Form</h1>
    	<form action="register_account.html" method="get"
        	name="registration_form" id="registration_form">
    		<fieldset>
	        	<legend>Member Information</legend>
	        	<label for="email">E-Mail:</label>
	        	<input type="email" name="email" id="email" autofocus required><br>
	        	
	        	  		
        		
        		<label for="first_name">First Name:</label>
				<input type="text" name="first_name" id="first_name" required><br>
				<label for="last_name">Last Name:</label>
				<input type="text" name="last_name" id="last_name" required><br>
				<label for="address">Address:</label>
				<input type="text" name="address" id="address"><br>
				<label for="city">City:</label>
				<input type="text" name="city" id="city" required><br>
				<label for="state">State:</label>
				<input type="text" name="state" id="state" required maxlength="2" placeholder="2-character code"><br>
				<label for="zip">ZIP Code:</label>
				<input type="text" name="zip" id="zip" required placeholder="5 or 9 digits" 
				       pattern="^\d{5}(-\d{4})?$" title="Either 5 or 9 digits"><br>
				<label for="phone">Phone Number:</label>
				<input type="tel" name="phone" id="phone" placeholder="999-999-9999" 
				       pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be 999-999-999 format"><br>
				</fieldset>
			<fieldset>
				<legend>Ordering Information</legend>
				<label for="order_type">Order Type:</label>
				<select name="order_type" id="order_type">
				    <option value="m">Member Package</option>
				    <option value="d">Donor Package</option>            
				    <option value="s">Single Tickets</option>
				</select><br>
				<label for="starting_date">Starting Date:</label>
				<input type="date" name="starting_date" id="starting_date" required><br>
				
				<label for="tickets">Tickets for Guests:</label>
				<input type="text" name="tickets" id="tickets" min="1" max="4" 
					placeholder="Number of Single tickets"><br>
				
			</fieldset>
			
			<fieldset id="paymMethod">
				<legend>Payment Method</legend>
				
				<input type="radio" class="payLeft" name="payMeth" value="bill">
				<label for="bill" class="payLeft">Bill Me</label> <br>
				
				<input type="radio" class="payRight" name="payMeth" value="cc">
				<label for="cc" class="payRight">Credit Card</label> <br>
			</fieldset>
			
			
				<fieldset id="buttons">
				<legend>Submit Your Membership</legend>
				<label>&nbsp;</label>
				<input type="submit" id="submit" value="Submit">
				<input type="reset" id="reset" value="Reset Fields"><br>
			</fieldset>
		</form>
	</section>
	<aside>
		<h1 id="speakers">2011-2012 Speakers</h1>
		<h2>October 19, 2011<br><a href="speakers/toobin.html">Jeffrey Toobin</a></h2>
		<img src="images/toobin75.jpg" alt="Jeffrey Toobin photo">
		<h2>November 16, 2011<br><a href="speakers/sorkin.html">Andrew Ross Sorkin</a></h2>
		<img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin photo">
		<h2>January 18, 2012<br><a href="speakers/chua.html">Amy Chua</a></h2>
		<img src="images/chua75.jpg" alt="Amy Chua photo">
		<h2>February 15, 2012<br><a href="speakers/sampson.html">Scott Sampson</a></h2>
		<img src="images/sampson75.jpg" alt="Scott Sampson">
	</aside>
	<footer>
		<p>&copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
	</footer>
</body>
</html>

Open in new window


My CSS is:
/* So the HTML5 structural tags work in older browsers */
article, aside, figure, footer, header, nav, section {
    display: block;
}
/* the styles for the elements */
* {
	margin: 0;
	padding: 0;
}
html {
	background-color: white;
}
body {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    width: 800px;
    margin: 0 auto;
    border: 3px solid #800000;
    background-color: #fffded;
}
a:focus, a:hover {
	font-style: italic;
}
/* the styles for the header */
header {
	
	padding: 1.5em 0;
	background-image: -moz-linear-gradient(
	    30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
	background-image: -webkit-linear-gradient(
	    30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
	background-image: -o-linear-gradient(
	    30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
	background-image: linear-gradient(
	    30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
}
header h1 {
	color: #800000;
}
header h2 {
	font-style: italic;
}
header img {
	float: left;
	padding: 0 30px;
}
.shadow {
	text-shadow: 2px 2px 2px #800000;
}
/* the styles for the form */
fieldset {
    margin-bottom: .5em;
    padding: .5em 1em;
}

#paymMethod {
	float: none;
}
/*
.payLeft {
	float: left;
	display: inline;
}

.payRight {
	float: right;
	display: inline;
}
*/
legend {
    color: black;
    font-weight: bold;
    font-size: 85%;
}
label {
    float: left;
    width: 10em;
    text-align: right;
}
input, select {
    width: 15em;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
}
input:required, input[required] {
	border: 2px solid #800000;
}
input:valid {
	border: 1px solid black;
}
input:invalid {
	box-shadow: none;
	border: 2px solid #800000;
}
br {
    clear: both;
}
#buttons input {
	width: 10em;
}
/* the styles for the navigation bar */
nav {
	clear: left;
}
nav ul {
	list-style: none;
	padding: 1em 0;       /* padding above and below li elements */
	background-color: #800000; }
nav li {
	display: inline; }
nav a {
	padding: 1em 2em;
	text-decoration: none;
	color: #fffded;
	font-weight: bold;
	border-right: 2px solid #fffded; }
nav a.current { color: yellow; }

/* the styles for the section */
section {
	clear: left;
	padding: 0 20px;
	width: 525px;
	float: right;
}
section h1 {
	color: #800000;
	font-size: 150%;
	padding: .5em 0 .25em;
}
section h2 {
	font-size: 120%;
	padding-bottom: .25em;
}
section p {
	padding-bottom: .5em;
}
section blockquote {
	padding: 0 2em;
	font-style: italic;
}
section ul {
	padding: 0 0 1.5em 1.25em;
	list-style-type: circle;
}
section li {
	padding-bottom: .35em;
}

article {
	border-top: 2px solid #800000;	
	border-bottom: 2px solid #800000;
}
article h1 {
	color: black;
}
article img {
	float: right;
	margin: 1em 0 1em 1em;
	border: 1px solid black;
}
aside {
	width: 215px;
	float: right;
	padding-left: 20px;
}
aside h1 {
	color: #800000;
	font-size: 150%;
	padding: .5em 0 .25em;
}
aside h2 {
	font-size: 120%;
	padding-bottom: .25em;
}
aside img {
	padding-bottom: 1em;
}
figure {
	margin-top: 1em;
}
figcaption {
	color: #800000;
}

table {
	border-collapse: collapse;
}
thead, tfoot {
	border-top: 2px solid #800000;
	border-bottom: 2px solid #800000;
}
th, td {
	padding: .2em .7em;
	text-align: left;
}
tfoot th, tfoot td {
	text-align: right;
	font-weight: bold;
}
.border_bottom {
	border-bottom: 2px solid #800000;
}
.right {
	text-align: right;
}
/*
th:first-child, td:first-child {
	text-align: left;
}
th:first-child {
	vertical-align: bottom; }
th:nth-child(3) {
	text-align: center; }
*/

/* the styles for the footer */
footer {
	border-top: 3px solid #800000;
	clear: both;
}
footer p {
	padding: 1em 0;
	text-align: center;
}

Open in new window


Thank you
0
APD_Toronto
Asked:
APD_Toronto
  • 2
1 Solution
 
Ronak PatelCommented:
try this:

HTML:
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>San Joaquin Valley Town Hall</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" href="styles/tickets.css">
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
	<header>
		<img src="images/town_hall_logo.gif" alt="Town Hall logo" height="80">
		<hgroup>
			<h1>San Joaquin Valley Town Hall</h1>
			<h2>Celebrating our <span class="shadow">75<sup>th</sup></span> Year</h2>
		</hgroup>
	</header>
	<nav>
    	<ul>
    		<li><a class="current" href="index.html">Home</a></li>
    		<li><a href="speakers.html">Speakers</a></li>
    		<li><a href="luncheons.html">Luncheons</a></li>
    		<li><a href="tickets.html">Tickets</a></li>
    		<li><a href="about.html">About Us</a></li>
    	</ul>
    </nav>
	<section>
		<h1>Order Form</h1>
    	<form action="register_account.html" method="get"
        	name="registration_form" id="registration_form">
    		<fieldset>
	        	<legend>Member Information</legend>
	        	<label for="email">E-Mail:</label>
	        	<input type="email" name="email" id="email" autofocus required><br>
	        	
	        	  		
        		
        		<label for="first_name">First Name:</label>
				<input type="text" name="first_name" id="first_name" required><br>
				<label for="last_name">Last Name:</label>
				<input type="text" name="last_name" id="last_name" required><br>
				<label for="address">Address:</label>
				<input type="text" name="address" id="address"><br>
				<label for="city">City:</label>
				<input type="text" name="city" id="city" required><br>
				<label for="state">State:</label>
				<input type="text" name="state" id="state" required maxlength="2" placeholder="2-character code"><br>
				<label for="zip">ZIP Code:</label>
				<input type="text" name="zip" id="zip" required placeholder="5 or 9 digits" 
				       pattern="^\d{5}(-\d{4})?$" title="Either 5 or 9 digits"><br>
				<label for="phone">Phone Number:</label>
				<input type="tel" name="phone" id="phone" placeholder="999-999-9999" 
				       pattern="\d{3}[\-]\d{3}[\-]\d{4}" title="Must be 999-999-999 format"><br>
				</fieldset>
			<fieldset>
				<legend>Ordering Information</legend>
				<label for="order_type">Order Type:</label>
				<select name="order_type" id="order_type">
				    <option value="m">Member Package</option>
				    <option value="d">Donor Package</option>            
				    <option value="s">Single Tickets</option>
				</select><br>
				<label for="starting_date">Starting Date:</label>
				<input type="date" name="starting_date" id="starting_date" required><br>
				
				<label for="tickets">Tickets for Guests:</label>
				<input type="text" name="tickets" id="tickets" min="1" max="4" 
					placeholder="Number of Single tickets"><br>
				
			</fieldset>
			
			<fieldset id="paymMethod">
				<legend>Payment Method</legend>
				
				<input type="radio" class="payLeft" name="payMeth" value="bill">
				<label for="bill" class="payLeft">Bill Me</label> <!-- <br> --> <!-- Modified -->
				
				<input type="radio" class="payRight" name="payMeth" value="cc">
				<label for="cc" class="payRight">Credit Card</label> <br>
			</fieldset>
			
			
				<fieldset id="buttons">
				<legend>Submit Your Membership</legend>
				<label>&nbsp;</label>
				<input type="submit" id="submit" value="Submit">
				<input type="reset" id="reset" value="Reset Fields"><br>
			</fieldset>
		</form>
	</section>
	<aside>
		<h1 id="speakers">2011-2012 Speakers</h1>
		<h2>October 19, 2011<br><a href="speakers/toobin.html">Jeffrey Toobin</a></h2>
		<img src="images/toobin75.jpg" alt="Jeffrey Toobin photo">
		<h2>November 16, 2011<br><a href="speakers/sorkin.html">Andrew Ross Sorkin</a></h2>
		<img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin photo">
		<h2>January 18, 2012<br><a href="speakers/chua.html">Amy Chua</a></h2>
		<img src="images/chua75.jpg" alt="Amy Chua photo">
		<h2>February 15, 2012<br><a href="speakers/sampson.html">Scott Sampson</a></h2>
		<img src="images/sampson75.jpg" alt="Scott Sampson">
	</aside>
	<footer>
		<p>&copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
	</footer>
</body>
</html>

Open in new window


CSS:
/* So the HTML5 structural tags work in older browsers */
article, aside, figure, footer, header, nav, section {
	display: block;
}
/* the styles for the elements */
* {
	margin: 0;
	padding: 0;
}
html {
	background-color: white;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 87.5%;
	width: 800px;
	margin: 0 auto;
	border: 3px solid #800000;
	background-color: #fffded;
}
a:focus, a:hover {
	font-style: italic;
}
/* the styles for the header */
header {
	
	padding: 1.5em 0;
	background-image: -moz-linear-gradient(
		30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
	background-image: -webkit-linear-gradient(
		30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
	background-image: -o-linear-gradient(
		30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
	background-image: linear-gradient(
		30deg, #800000 0%, #fffded 30%, white 50%, #fffded 80%, #800000 100%);
}
header h1 {
	color: #800000;
}
header h2 {
	font-style: italic;
}
header img {
	float: left;
	padding: 0 30px;
}
.shadow {
	text-shadow: 2px 2px 2px #800000;
}
/* the styles for the form */
fieldset {
	margin-bottom: .5em;
	padding: .5em 1em;
}

#paymMethod {
	float: none;
}

/*--- Modified ---*/
.payLeft {
	float: none;
	display: inline;
	width: 3em;
}

.payRight {
	float: none;
	display: inline;
	width: 3em;
}
/*--- End ---*/

legend {
	color: black;
	font-weight: bold;
	font-size: 85%;
}
label {
	float: left;
	width: 10em;
	text-align: right;
}
input, select {
	width: 15em;
	margin-left: 0.5em;
	margin-bottom: 0.5em;
}
input:required, input[required] {
	border: 2px solid #800000;
}
input:valid {
	border: 1px solid black;
}
input:invalid {
	box-shadow: none;
	border: 2px solid #800000;
}
br {
	clear: both;
}
#buttons input {
	width: 10em;
}
/* the styles for the navigation bar */
nav {
	clear: left;
}
nav ul {
	list-style: none;
	padding: 1em 0;       /* padding above and below li elements */
	background-color: #800000; }
nav li {
	display: inline; }
nav a {
	padding: 1em 2em;
	text-decoration: none;
	color: #fffded;
	font-weight: bold;
	border-right: 2px solid #fffded; }
nav a.current { color: yellow; }

/* the styles for the section */
section {
	clear: left;
	padding: 0 20px;
	width: 525px;
	float: right;
}
section h1 {
	color: #800000;
	font-size: 150%;
	padding: .5em 0 .25em;
}
section h2 {
	font-size: 120%;
	padding-bottom: .25em;
}
section p {
	padding-bottom: .5em;
}
section blockquote {
	padding: 0 2em;
	font-style: italic;
}
section ul {
	padding: 0 0 1.5em 1.25em;
	list-style-type: circle;
}
section li {
	padding-bottom: .35em;
}

article {
	border-top: 2px solid #800000;	
	border-bottom: 2px solid #800000;
}
article h1 {
	color: black;
}
article img {
	float: right;
	margin: 1em 0 1em 1em;
	border: 1px solid black;
}
aside {
	width: 215px;
	float: right;
	padding-left: 20px;
}
aside h1 {
	color: #800000;
	font-size: 150%;
	padding: .5em 0 .25em;
}
aside h2 {
	font-size: 120%;
	padding-bottom: .25em;
}
aside img {
	padding-bottom: 1em;
}
figure {
	margin-top: 1em;
}
figcaption {
	color: #800000;
}

table {
	border-collapse: collapse;
}
thead, tfoot {
	border-top: 2px solid #800000;
	border-bottom: 2px solid #800000;
}
th, td {
	padding: .2em .7em;
	text-align: left;
}
tfoot th, tfoot td {
	text-align: right;
	font-weight: bold;
}
.border_bottom {
	border-bottom: 2px solid #800000;
}
.right {
	text-align: right;
}
/*
th:first-child, td:first-child {
	text-align: left;
}
th:first-child {
	vertical-align: bottom; }
th:nth-child(3) {
	text-align: center; }
*/

/* the styles for the footer */
footer {
	border-top: 3px solid #800000;
	clear: both;
}
footer p {
	padding: 1em 0;
	text-align: center;
}

Open in new window


Hope this helps.

Regards,
Ronak
0
 
APD_TorontoAuthor Commented:
Can you tell me what float does, I have always been unclear?
0
 
Ronak PatelCommented:
Hi APD_Toronto,

Basically, whichever element has the float property set to left/right.. it'll float that element to that side within the container.

Refer below links to know more about the CSS Float property:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://css-tricks.com/all-about-floats/
http://www.w3schools.com/cssref/pr_class_float.asp
http://www.w3schools.com/css/css_float.asp

Hope this helps

Regards,
Ronak
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now