?
Solved

Side by side radio buttons

Posted on 2015-02-05
3
Medium Priority
?
710 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

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…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

762 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