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
My CSS is:
Thank you
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> </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>© 2012, San Joaquin Valley Town Hall, Fresno, CA 93755</p>
</footer>
</body>
</html>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;
}Thank you
ASKER
Can you tell me what float does, I have always been unclear?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
HTML:
Open in new window
CSS:
Open in new window
Hope this helps.
Regards,
Ronak