Solved

Side by side radio buttons

Posted on 2015-02-05
3
524 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
ID: 40592999
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
ID: 40594050
Can you tell me what float does, I have always been unclear?
0
 
LVL 5

Accepted Solution

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 36
Synchronizing CSS load 3 29
.php tree directory? 5 54
FIELDSETs and LEGENDs in email markup 1 9
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

932 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

9 Experts available now in Live!

Get 1:1 Help Now