I would like the labels for the inputs to be the same width allowing the inputs and labels to be like a table.
Kind of like two columns: 1 for the labels and 1 for the inputs
Code So Far:
th, td, table{border: 2px solid black;
border-collapse: collapse;
}
th, td{width: 100px}
table{width: 100%;
text-align: center;}
body{font-family: "Bradley's Hand", cursive;}
.label{display: inline-block;
width: 100px}
input{width: 200px;}
<body>
<h1>Add Transactions</h1>
<fieldset>
<legend>Use This Form To Add Transactions</legend>
<form action="add.php" method="post">
<label class="label" for="date">Transaction Date: </label>
<input type="date" name="date" required>
<br>
<br>
<label class="label" for="amount">Transaction Amount: </label>
<input type="number" name="amount" required>
<br>
<br>
<label class="label" for="merchant">Merchant: </label>
<select name="merchant" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label class="label" for="om">Other Merchant: </label>
<input type="text" name="om">
<br><br>
<label for="type" class="label">Transaction Type: </label>
<select name="type" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label for="ot" class="label">Other Transaction Type: </label>
<input type="text" name="ot">
<br><br>
<label for="source" class="label">Source: </label>
<select name="source" required>
<option value="" disable selected>Select One</option>
<option value="other">Other</option>
</select>
<br>
<br>
<label for="os" class="label">Other Source: </label>
<input type="text" name="os">
<br>
<br>
<input type="reset">
<input type="submit" value="Save Transaction">
</form>
</fieldset>
</body>
</htm>
Thanks!
P.S. I can give more details if I am not clear enough!
P.P.S. What I mean by
like a table
is like the structure. Not like an actual table with <table>
Easiest way to solve it: CSS-Grid. Will allow for full responsiveness and create a table like layout. to leave the buttons at the bottom as they where, I wrapped them inside an extra div.
body {
font-family: "Bradley's Hand", cursive;
}
form {
display: grid;
grid-template-columns: min-content auto;
grid-row-gap: 2em;
white-space: nowrap;
}
.last-row {
grid-column: span 2;
}
.last-row input {
width: 200px;
}
<body>
<h1>Add Transactions</h1>
<fieldset>
<legend>Use This Form To Add Transactions</legend>
<form action="add.php" method="post">
<label class="label" for="date">
Transaction Date:
</label>
<input type="date" name="date" required>
<label class="label" for="amount">
Transaction Amount:
</label>
<input type="number" name="amount" required>
<label class="label" for="merchant">
Merchant:
</label>
<select name="merchant" required>
<option value="" disable selected>
Select One
</option>
<option value="other">
Other
</option>
</select>
<label class="label" for="om">
Other Merchant:
</label>
<input type="text" name="om">
<label for="type" class="label">
Transaction Type:
</label>
<select name="type" required>
<option value="" disable selected>
Select One
</option>
<option value="other">
Other
</option>
</select>
<label for="ot" class="label">
Other Transaction Type:
</label>
<input type="text" name="ot">
<label for="source" class="label">Source: </label>
<select name="source" required>
<option value="" disable selected>
Select One
</option>
<option value="other">
Other
</option>
</select>
<label for="os" class="label">Other Source: </label>
<input type="text" name="os">
<div class="last-row">
<input type="reset">
<input type="submit" value="Save Transaction">
</div>
</form>
</fieldset>
</body>
</htm>
Related
i'm a french begginer (so excuse the fact that some part of it are in french, if it's a problem i can translate, also i know my code can be more clean so if you have any idea dont hesitate!).
I'm coding a form for a project and i would like to align all my text like this :
but my page look like this for the moment :
fieldset {
width: 900px;
}
em {
color: red;
}
#demande {
height: 200px;
width: 800px;
background-color: #EAEAEA;
}
placeholder {
text-align: top;
}
strong {
color: #C1D58D;
}
input {
margin-left: 100px;
}
<fieldset>
<legend><b>INFORMATIONS PERSONNELLES</b></legend>
<form method="get">
<label for "Nom">Nom<em>*</em> :</label>
<input type="text" name="Nom" id="text" required />
</form>
</br>
</br>
<form method="get">
<label for "Prénom">Prénom<em>*</em> :</label>
<input type="text" name="Prénom" id="text" required />
</form>
</br>
</br>
<form method="get">
<form method="get">
<label><strong> Votre sexe</strong><em>*</em> :</label> </br>
<input type="radio" name="Sexe" id="Fille" /> <label for="Fille">Fille</label>
<input type="radio" name="Sexe" id="Garçon" /> <label for="Garçon">Garçon</label>
<input type="radio" name="Sexe" id="Autre" /> <label for="Autre">Autre</label>
</form>
</br>
</br>
<label> Année<em>*</em> :</label>
<input type="number" name="Année" id="Année" placeholder="Exemple : 1987" />
</form>
</br>
</br>
<form method="get">
<label for "pays"> Pays<em>*</em> :</label>
<select name="pays" id="pays" required>
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
</br>
</br>
</form>
<h3>Les champs marqués par <em>*</em> sont obligatoires</h3>
</fieldset>
</br>
<form method="get">
<input type="submit" name="Envoyer" value="Annuler" />
<input type="submit" name="Envoyer" value="Envoyer" />
</form>
```
i know i could creat an id for every then edit it with css but i was wondering if there was a best way to do it (a more efficient way)
One easy solution is the use of CSS-Grid. I removed the form tags so that all elements are direct children of the fieldset.
As such I can declared fieldset { display: grid; } to apply the grid.
Next I apply a 2 column layout where the first column takes as much space as needed and the second column the remaining space with: fieldset { grid-template-columns: min-content auto;.
To space the elements apart, you can use the grid-gap-property.
fieldset {
max-width: 900px;
display: grid;
grid-template-columns: min-content auto;
gap: 10px;
}
em {
color: red;
}
fieldset h3 {
grid-column: span 2;
}
<fieldset>
<legend><b>INFORMATIONS PERSONNELLES</b></legend>
<label for "Nom">Nom<em>*</em> :</label>
<input type="text" name="Nom" id="text" required />
<label for "Prénom">Prénom<em>*</em> :</label>
<input type="text" name="Prénom" id="text" required />
<label><strong> Votre sexe</strong><em>*</em> :</label>
<div class="radio-group">
<input type="radio" name="Sexe" id="Fille" /> <label for="Fille">Fille</label>
<input type="radio" name="Sexe" id="Garçon" /> <label for="Garçon">Garçon</label>
<input type="radio" name="Sexe" id="Autre" /> <label for="Autre">Autre</label>
</div>
<label> Année<em>*</em> :</label>
<input type="number" name="Année" id="Année" placeholder="Exemple : 1987" />
<label for "pays"> Pays<em>*</em> :</label>
<select name="pays" id="pays" required>
<optgroup label="Europe">
<option value="france">France</option>
<option value="espagne">Espagne</option>
<option value="royaume-uni">Royaume-Uni</option>
<option value="italie">Italie</option>
</optgroup>
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">États-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select>
<h3>Les champs marqués par <em>*</em> sont obligatoires</h3>
</fieldset>
<form method="get">
<input type="submit" name="Envoyer" value="Annuler" />
<input type="submit" name="Envoyer" value="Envoyer" />
</form>
What I want is for some of the input fields to have two place holder in given image below exactly same like picture given below. I have tried a lot but nothing works.
<form class="subscribe-form">
<div class="personal-information">
<select name = "country" id="country">
<span>Country</span>
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
<select name ="cardType" id="cardType">
<option value = "Amex">Amex</option>
<option value = "Visa">Visa</option>
<option value = "Master card">Master card</option>
</select>
<input type="text" id="cnum" name="address" placeholder="Card Number"/>
<div class="date-container">
<div class="card-data">
<input type="text" id="expyear" name="expyear" placeholder="Expiry Date">
<input type="text" id="csc" name="csc" placeholder="CSC"/>
</div>
<div class="name-data">
<input type="text" id="fname" name="firstname" placeholder="First Name"/>
<input type="text" id="lname" name="lastname" placeholder="Last Name"/>
</div>
</div>
</div>
<div class="Billing-deatails">
<h3>Billing Address</h3>
<input type="text" id="line1" name="line2" placeholder="Address Line 1"/>
<input type="text" id="line2" name="line2" placeholder="Address Line 2"/>
<input type="text" id="Town/city" name="Town/city" placeholder="Town/city"/>
<div class="numberType">
<select name = "country" id="country2">
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
<input type="text" id="number" name="number" placeholder="Postcode"/>
</div>
</div>
<div class="contact-information">
<h5>Contact Information</h5>
<div class="number-info">
<select name = "phoneType" id="phoneType">
<option value ="Mobile" >Mobile</option>
</select>
<input type="text" id="number" name="number" placeholder="+65"/>
</div>
<input type="email" id="email" name="email" placeholder="Email Address"/>
</div>
</div>
<div class="subscribe-btn">
<button type="submit">SUBSCRIBE</button>
</div>
</form>
There are no multiple placeholder things in HTML. You have to use the Label with custom CSS.You can try the below code but I have done it for only one Select box you can use the same for others. You can edit the CSS as per your convenience.
.select-wrap
{
border: 1px solid #777;
border-radius: 4px;
margin-bottom: 10px;
padding: 0 5px 5px;
width:200px;
background-color:#ebebeb;
}
.select-wrap label
{
font-size:10px;
text-transform: uppercase;
color: #777;
padding: 2px 8px 0;
}
select
{
background-color: #ebebeb;
border:0px;
}
<div class="select-wrap">
<label>Country</label>
<select name = "country" id="country" style="width: 100%;">
<span>Country</span>
<option value ="US" >US</option>
<option value = "India">India</option>
<option value = "Malaysia">Malaysia</option>
</select>
</div>
I'm required to use only HTML to create a web form in which the search result will link me to the external website's search results. There are search options with filters that I have included and when I enter the input and select the filters, it links me to the external website but it does not filter out the search from my own web form, meaning that it would treat any search as a normal search without the filters for 'month', '6months' and 'year' option.
https://www.worldscientific.com/search/advanced - The website that I am supposed to link the search result from my web form to.
HTML Code:
<html>
<style>
*{
box-sizing: border-box;
}
#border1 {
width: 1000px;
height: 500px;
padding: 15px;
border: 2px;
}
</style>
<h2>Part 3 - World Science</h2>
<form id="worldscience_search-form"
action="https://www.worldscientific.com/action/doSearch?field1=AllField&text1=text1&publication=&Ppub=&AfterMonth=&AfterYear=&BeforeMonth=&BeforeYear=&earlycite=on" method="get" target="_blank" class="jcf-select" autocomplete="off">
<div id="border1">
<div style = "float:left; width:20%">
<select id="textArea2" name="field1" style = "height:40px; width:120px;">
<option value="AllField">Anywhere</option>
<option value="Title">Title</option>
<option value="Contrib">Author</option>
<option value="Keyword">Keywords</option>
<option value="Abstract">Abstract</option>
</select>
<br><br><br>
<label for="publication">Published in</label> <br><br><br>
<label>Publication Date</label>
<input type="hidden" value="AfterYear">
<input type="hidden" value="BeforeYear">
<br>
</div>
<div style = "float:left; width:20%">
<input type="text" placeholder="Enter Search term" name="text1" style = "width: 500px; height:40px"><br><br>
<input type="text" name="publication" placeholder="e.g. Journal of Theoretical Biology" style = "width:500px; height :40px">
<br><br><br>
<input type="radio" name="Ppub" value="" checked="checked">
<label>All dates</label>
<br><br><br>
<input type="radio" name="Ppub" value="">
<label>Last</label>
<br><br><br>
<input type="radio" name="Ppub" value="">Custom Range
</div>
<div style = "float:left; width:50%">
<br><br><br><br><br><br><br><br><br><br>
<select id="Ppub" value="" style = "height:40px; width:120px;">
<option value="">Select</option>
<option value="20181218-20190118">month</option>
<option value="20180718-20190118">6 months</option>
<option value="20180118-20190118">year</option></select><br><br>
<input type="submit" value="Search" />
</div>
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br>
</html>
I don't think that I should have coded the values in the option value. How am I supposed to filter out without coding in the dates?
You have to use hidden inputs: (I only show start of the form)
<form id="worldscience_search-form" action="https://www.worldscientific.com/action/doSearch" method="get" target="_blank" class="jcf-select" autocomplete="off">
<input type="hidden" name="field1" value="AllField">
<input type="hidden" name="text1" value="text1">
<input type="hidden" name="publication" value="">
<input type="hidden" name="Ppub" value="">
<input type="hidden" name="AfterMonth" value="">
<input type="hidden" name="AfterYear" value="">
<input type="hidden" name="BeforeMonth" value="">
<input type="hidden" name="BeforeYear" value="">
<input type="hidden" name="earlycite" value="on">
Im making this webpage and I am almost done its just I have a question regarding the background because the second one is the one that its supposed to look like and the first one is mine. I just want to get rid of that white space in between and have like outer padding. Ive tried playing around with padding and it didnt work for some reason heres the link (https://imgur.com/a/FlVN538) also heres my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cycling Tours</title>
<style>
body {
font-family: Verdana, sans-serif;
}
form {
width: 700px;
margin: 0 auto;
}
h1 {
text-align: center;
}
fieldset {
background-color: #4681A4;
min-width: 700px;
max-width: 700px;
border: solid white 2px;
}
legend {
color: white;
text-indent: 2em;
}
label {
font-size: 0.9em;
}
textarea {
display: block;
width: 80%;
height: 100px;
min-width: 50%;
max-width: 90%;
}
.buttonstyle {
text-transform: uppercase;
font-weight: bold;
background-color:#FFFFE6;
}
input[type=text], input[type=email], input[type=phonenumber] {
background-color:#ffffe6;
}
</style>
</head>
<body>
<h1>Fall 2018 Reviews</h1>
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<!--<input type="hidden" name="formname" value="Donation Form">
<input type="hidden" name="windowname" value="Donation">-->
<fieldset id="aboutyou">
<legend>About you(optional)</legend>
<label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
<br>
<select name="seasons" id="seasons" size="4" multiple>
<option>Winter</option>
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
</select>
<br>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" >
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="phonenumber">Phone Number</label>
<input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
<br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="name#example.com" size="40">
</fieldset>
<fieldset>
<legend>Trip Reviews</legend>
<div id="trails">
<label for="trailchoice"></label>
<select name="trailchoice" id="trailchoice">
<option value="Alberta Rural">Alberta Rural</option>
<option value="B.C. Coast">B.C. Coast</option>
<option value="Ontario Lake Superior">Ontario Lake Superior</option>
<option value="PEI">PEI</option>
<option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
</select>
<div id="daylength">
<label for="days"></label>
<select name="days" id="days">
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="14 days">14 days</option>
</select>
<div id="credit">
<input type="radio" id="fourstars" value="4" checked>
<label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="threestars" id="threestars" value="3">
<label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="twostars" id="twostars" value="2">
<label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="onestar" id="onestar" value="1">
<label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<label for="feedback">comments</label>
<textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
</div>
</select>
</div>
</fieldset>
<fieldset id="fsfeedback">
<legend>I would be interested in these trips:(check all that apply)</legend>
<input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
<label for="SLC">Sea or lake coast</label>
<br>
<input type="checkbox" name="Rural" id="Rural" value="Rural">
<label for="Rural">Rural</label>
<br>
<input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
<label for="Mountain">Mountains</label>
<br>
<input type="checkbox" name="other" id="other" value="other">
<label for="other" >Other (Please Specify)</label><label for="other"></label>
<input type="text" name="specified" id="specified">
</fieldset>
<input type="submit" value="Send Review" class="buttonstyle">
<input type="reset" value="Cancel" class="buttonstyle">
</form>
</body>
</html>
body {
font-family: Verdana, sans-serif;
}
form {
background: #4681A4;
width: 700px;
margin: 0 auto;
padding-top: 10px;
padding-bottom: 10px;
}
h1 {
text-align: center;
}
fieldset {
border: solid white 2px;
margin: 5px;
margin-bottom: 20px;
}
legend {
color: white;
text-indent: 2em;
}
label {
font-size: 0.9em;
}
textarea {
display: block;
width: 80%;
height: 100px;
min-width: 50%;
max-width: 90%;
}
.buttonstyle {
text-transform: uppercase;
font-weight: bold;
background-color: #FFFFE6;
}
input[type=text],
input[type=email],
input[type=phonenumber] {
background-color: #ffffe6;
}
.buttons {
margin-left: 19px;
}
<h1>Fall 2018 Reviews</h1>
<form method="POST" action="https://csunix.mohawkcollege.ca/tooltime/showit.pl">
<!--<input type="hidden" name="formname" value="Donation Form">
<input type="hidden" name="windowname" value="Donation">-->
<fieldset id="aboutyou">
<legend>About you(optional)</legend>
<label for="aboutyou">I usually prefer to trips around this time of year(select all that apply)</label>
<br>
<select name="seasons" id="seasons" size="4" multiple>
<option>Winter</option>
<option>Spring</option>
<option>Summer</option>
<option>Fall</option>
</select>
<br>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">
<br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<br>
<label for="phonenumber">Phone Number</label>
<input type="phonenumber" name="phonenumber" id="phonenumber" placeholder="123-456-7890" size="12">
<br>
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="name#example.com" size="40">
</fieldset>
<fieldset>
<legend>Trip Reviews</legend>
<div id="trails">
<label for="trailchoice"></label>
<select name="trailchoice" id="trailchoice">
<option value="Alberta Rural">Alberta Rural</option>
<option value="B.C. Coast">B.C. Coast</option>
<option value="Ontario Lake Superior">Ontario Lake Superior</option>
<option value="PEI">PEI</option>
<option value="Nova Scotia Cabot Trail">Nova Scotia Cabot Trail</option>
</select>
<div id="daylength">
<label for="days"></label>
<select name="days" id="days">
<option value="5 days">5 days</option>
<option value="7 days">7 days</option>
<option value="10 days">10 days</option>
<option value="14 days">14 days</option>
</select>
<div id="credit">
<input type="radio" id="fourstars" value="4" checked>
<label for="fourstars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img
src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="threestars" id="threestars" value="3">
<label for="threestarts"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="twostars" id="twostars" value="2">
<label for="twostars"><img src="l5mg/wheel_sm.jpg"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<input type="radio" name="onestar" id="onestar" value="1">
<label for="onestar"><img src="l5mg/wheel_sm.jpg"></label>
<br>
<label for="feedback">comments</label>
<textarea name="feedback" id="feedback" rows="6" cols="45" placeholder="Place feedback here..."></textarea>
</div>
</select>
</div>
</fieldset>
<fieldset id="fsfeedback">
<legend>I would be interested in these trips:(check all that apply)</legend>
<input type="checkbox" name="Sea or Lake Coast" id="SLC" value="Sea or Lake coast">
<label for="SLC">Sea or lake coast</label>
<br>
<input type="checkbox" name="Rural" id="Rural" value="Rural">
<label for="Rural">Rural</label>
<br>
<input type="checkbox" name="Mountain" id="Mountain" value="Mountains">
<label for="Mountain">Mountains</label>
<br>
<input type="checkbox" name="other" id="other" value="other">
<label for="other">Other (Please Specify)</label><label for="other"></label>
<input type="text" name="specified" id="specified">
</fieldset>
<div class="buttons">
<input type="submit" value="Send Review" class="buttonstyle">
<input type="reset" value="Cancel" class="buttonstyle">
</div>
</form>
I have a basic form, that I'm trying to get two inputs per line. Unless the 'province' select tag is floated right, it breaks the spacing. If it's 5th, like in the code I posted, there becomes a blank spot between Postal Code and Fax. The tab order even remains correct (phone -> fax -> email -> web).
Where if it's floated right (6th in this screenshot) everything spaces fine.
My form:
<form id="form" action="submit.php" method="post">
<fieldset>
<p>
<label for="first_name">* First Name:</label>
<input type="text" name="first_name" id="first_name" required />
</p>
<p>
<label for="last_name">* Last Name:</label>
<input type="text" name="last_name" id="last_name" required />
</p>
<p>
<label for="address">Company Address:</label>
<input type="text" name="address" id="address" />
</p>
<p>
<label for="city">City:</label>
<input type="text" name="city" id="city" />
</p>
<p>
<label for="province">Province:</label>
<select name="province" id="province">
<option value="">Select location</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NT">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
<option value="US">(US State)</option>
</select>
</p>
<p>
<label for="postal_code">Postal Code:</label>
<input type="text" name="postal_code" id="postal_code" />
</p>
<p>
<label for="phone">* Phone:</label>
<input type="tel" name="phone" id="phone" required />
</p>
<p>
<label for="fax">Fax:</label>
<input type="tel" name="fax" id="fax" />
</p>
<p>
<label for="email">E-Mail Address:</label>
<input type="email" name="email" id="email" />
</p>
<p>
<label for="web_address">Website Address:</label>
<input type="text" name="web_address" id="web_address" />
</p>
</fieldset>
</form>
And my CSS:
fieldset p {
display: inline-block;
width: 49%;
}
fieldset p:nth-of-type(even){
float:right;
}
And if I remove the 'province' select tag everything spaces fine. With the province list, it always breaks the second 'float: right' after the select tag. Is there something wrong with my select tag? Or is it something with my CSS?
JSFiddles:
First screenshot: http://jsfiddle.net/sB2W7/
Second screenshot: http://jsfiddle.net/4CfQ5/
I would use display: inline-block instead of float
DEMO http://jsfiddle.net/LLJ6Z/2/
p {
display: inline-block;
width: 45%
}
label {
display: inline-block;
width: 130px;
display
}
input, select {
display: inline-block;
width: 100px;
}