Solved

Side by side radio buttons

Posted on 2015-02-05
3
496 Views
Last Modified: 2015-02-07
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
Comment
Question by:APD_Toronto
  • 2
3 Comments
 
LVL 5

Expert Comment

by:Ronak Patel
Comment Utility
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
 

Author Comment

by:APD_Toronto
Comment Utility
Can you tell me what float does, I have always been unclear?
0
 
LVL 5

Accepted Solution

by:
Ronak Patel earned 500 total points
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now