Solved

Side by side radio buttons

Posted on 2015-02-05
3
588 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create animated movies for web page 18 90
Question about traversing a tree using jQuery 7 34
HTML Anchor Link Problem 3 39
Selected in an option list 13 21
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…
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

821 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