I'm trying to get rid of the space between the period dates and the guets field, tried everything with border, padding, also tried floating the fields but didn't work.
here is the code
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="frmContact" action="/confirmacao.html" method="post">
<fieldset>
<legend>Consulta:</legend>
<p>
<label class="field" for="usr">Nome: </label>
<input id="usr" type="text" name="nome" title="Digite seu nome" class="textbox"/>
</p>
<p>
<label class="field" for="usr">Period: </label>
<input type="text" id="dataEntrada" name="dataEntrada" class="textbox-date"/>
a:
<input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>
</p>
<p>
<label class="field" for="hospedes">Guests: </label>
<select class="textbox-option" id="hospedes" name="hospedes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</p>
<p>
<label class="field" for="usr">E-mail: </label>
<input id="email" class="textbox" name="email" title="Seu e-mail para que possamos entrar em contato"/>
</p>
<p>
<label class="field" for="usr">Detalhes: </label>
<textarea id="mensagem" name="msg" rows="6" cols="30" title="Detalhes adicionais"></textarea>
</p>
<p>
<input type="submit" value=" Enviar "/>
</p>
</fieldset>
</form>
</body>
and this is the css
label.field {
text-align: right;
width: 100px;
float: left;
}
.textbox, .textbox-option{
float: left;
}
.textbox {
width: 250px;
}
.textbox-date{
width: 75px;
}
fieldset p {
clear: both;
padding: 5px;
}
In Firefox Web Developer Tools, I see 16px of margin-bottom:
This is being added by the browser's default stylesheet:
Scenarios like this is why CSS Resets are used. Alternatively, to fix this specific problem, set the margin of your your p elements in your stylesheet.
I guess it because when paragraph has some text in paragraph and then it found new paragraph they will have space between them. Anyway I found one solution that not best solution is modify code below by remove text in paragraph to lable of text.
CSS - add new class for label, add float left to .textbox-date
<style type="text/css">
label.field {
text-align: right;
width: 100px;
float: left;
}
label.newfield
float: left;
}
.textbox, .textbox-option{
float: left;
}
.textbox {
width: 250px;
}
.textbox-date{
width: 75px;
float: left;
}
fieldset p {
clear: both;
padding: 5px;
}
</style>
html - add new lable
<label class="newfield" for="dataSaida"> a: </label>
for
<input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>
like this
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="frmContact" action="/confirmacao.html" method="post">
<fieldset>
<legend>Consulta:</legend>
<p>
<label class="field" for="usr">Nome: </label>
<input id="usr" type="text" name="nome" title="Digite seu nome" class="textbox"/>
</p>
<p>
<label class="field" for="dataEntrada">Period: </label>
<input type="text" id="dataEntrada" name="dataEntrada" class="textbox-date"/>
<label class="newfield" for="dataSaida"> a: </label>
<input type="text" id="dataSaida" name="dataSaida" class="textbox-date"/>
</p>
<p>
<label class="field" for="hospedes">Guests: </label>
<select class="textbox-option" id="hospedes" name="hospedes">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</p>
<p>
<label class="field" for="usr">E-mail: </label>
<input id="email" class="textbox" name="email" title="Seu e-mail para que possamos entrar em contato"/>
</p>
<p>
<label class="field" for="usr">Detalhes: </label>
<textarea id="mensagem" name="msg" rows="6" cols="30" title="Detalhes adicionais"></textarea>
</p>
<p>
<input type="submit" value=" Enviar "/>
</p>
</fieldset>
</form>
</body>
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>
How can I make the 2nd input form of each go all the way to the right.
I tried putting float: right, but it messed up the entire form.
Here's what I have right now:
HTML:
<form action="pdotest/test.php" method="post">
<div>
<div style="float: left;">
<label>First Name:</label><br/>
<input type="text" name="firstname" />
</div>
<div>
<label>Province:</label><br/>
<select name="Province">
<option value="volvo">Alberta</option>
<option value="saab">British Columbia</option>
<option value="mercedes">Manitoba</option>
<option value="audi">New Brunswick</option>
<option value="audi">Newfoundland and Labrador </option>
<option value="audi">Northwest Territories</option>
<option value="audi">Nova Scotia</option>
<option value="audi">Ontario</option>
<option value="audi">Prince Edward Island</option>
<option value="audi">Quebec</option>
<option value="audi">Saskatchewan</option>
<option value="audi">Yukon</option>
</select>
</div>
</div>
<div>
<div style="float: left;">
<label>Last Name:</label><br/>
<input type="text" name="lastname" />
</div>
<div>
<label>Postal Code:</label><br/>
<input type="text" name="postalcode" />
</div>
</div>
<div>
<div style="float: left;">
<label>Address Line 1:</label><br/>
<input type="text" name="addressline1" />
</div>
<div>
<label>Phone Number (day):</label><br/>
<input type="text" name="phonenumber" />
</div>
</div>
<div>
<div style="float: left;">
<label>Address Line 2:</label><br/>
<input type="text" name="addressline2" />
</div>
<div>
<label>Postal Code:</label><br/>
<input type="text" name="postalcode" />
</div>
</div>
</form>
CSS:
input[type=text], select {
width: 300px;
padding: 8px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
https://jsfiddle.net/y13ac506/1/
I don't really want to use margin/padding.
Use float:right and then add flowing code in end:
<div style="clear:both;"></div>
</form>
Note: This is easiest not best way according to your code.
Use two different divs with float:left & width:50% style. The two will align side by side.Then put the input as per your requirment
.container{
width:50%;
margin:0;
padding:0;
float:left;
}
<div class="container">
<div>
<label>First Name:</label><br>
<input type="text" name="firstname"/>
</div><br>
<div>
<label>Last Name:</label><br>
<input type="text" name="lastname"/>
</div>
</div>
<div class="container">
<div>
<label>Province:</label><br>
<select name="Province">
<option value="volvo">Alberta</option>
<option value="saab">British Columbia</option>
<option value="mercedes">Manitoba</option>
<option value="audi">New Brunswick</option>
<option value="audi">Newfoundland and Labrador </option>
<option value="audi">Northwest Territories</option>
<option value="audi">Nova Scotia</option>
<option value="audi">Ontario</option>
<option value="audi">Prince Edward Island</option>
<option value="audi">Quebec</option>
<option value="audi">Saskatchewan</option>
<option value="audi">Yukon</option>
</select>
</div><br>
<div>
<label>Postal Code:</label><br>
<input type="text" name="postalcode"/>
</div>
</div>
Try decreasing the value of width
input[type=text], select {
width: 250px;
}
/* manage it with margin for appropriate spacing around input fields..
I have searched all over but cant seem to fix my problem.
Somehow I am missing the solution to this problem.
I am new to Muse, but quite familiar with html and css.
I made this contact form in a text editor, it works perfect in DW and jsfiddle. Moment I insert it into Muse it crushes it.
I have tried external style sheet, internal with Object insert, inline with Object insert. All give me the same result (image below).
Someone even suggested putting a external style sheet in the assets folder, I did and even tried the css folder and normal folder, no luck.
Is this possible to fix or does Muse not allow this type of thing?
Thanx in advance for all helpful replies.
Samm
This is what the code looks like:
label {
float: left;
width: 6em;
text-align: right;
margin-right: 10px;
}
.submit {
margin-left: 6em;
}
fieldset {
width: 500px;
background-color: #FFDE00;
border: none;
}
p {
font-family: arial;
}
<fieldset>
<form action="mailto:xxx#hotmail.com"
method="post" enctype="text/plain">
<!-----Form heading----->
<p> Tell us who you are </p>
<!-----Inout customer details----->
<p>
<label class="username" for="first Name">
First Name: </label>
<input type="text" name="firstname" id="first Name"
size="35" maxlength="40" /> </p>
<p>
<label class="username" for="Email">
Email: </label>
<input type="text" name="email" id="Email"
size="35" maxlength="40" /> </p>
<!-----Dropdown make----->
<p> Please select your make: </p>
<p>
<select name="make">
<option value="3M">3M</option>
<option value="3M">Acer</option>
<option value="3M">Ask</option>
<option value="3M">BenQ</option>
<option value="3M">Epson</option>
<option value="3M">Hitachi</option>
<option value="3M">InFocus</option>
<option value="3M">LG</option>
<option value="3M">Mitsubishi</option>
<option value="3M">NEC</option>
<option value="3M">Optoma</option>
<option value="3M">Panasonic</option>
<option value="3M">Philips</option>
<option value="3M">Samsung</option>
<option value="3M">Sanyo</option>
<option value="3M">Sharp</option>
<option value="3M">Sony</option>
<option value="3M">Toshiba</option>
<option value="3M">Viewsonic</option>
<option value="3M">Vivitek</option>
<option value="3M">Other</option>
</select> </p>
<!-----Submit picture of sticker----->
<p> Use the Choose File button to submit a picture of your model sticker if unsure what number to use: </p>
<p>
<input type="file" size="30" /> </p>
<!-----Text Area----->
<p> For any other comments or if you selected Other please specify here: </p>
<p>
<textarea name="comments" rows="5" cols="40">
Enter more comments here...
</textarea> </p>
<!-----Submit & Reset buttons----->
<p class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Clear the form" /> </p>
</form>
</fieldset>
This is what the start and end result looks like:
Not Nice
You'll probably find that DW uses alot of browser initial CSS styling, where as Muse probably resets everything. So you have to state things from scratch, such as border, margins, paddings etc.
For example, each of your paragraph elements need to have some margin-bottom applied. This will immediately make it look much more like the first example.
label {
float: left;
width: 6em;
text-align: right;
margin-right: 10px;
}
.submit {
margin-left: 6em;
}
fieldset {
width: 500px;
background-color: #FFDE00;
border: none;
}
p {
font-family: arial;
margin-bottom:1em;
}
<fieldset>
<form action="mailto:xxx#hotmail.com"
method="post" enctype="text/plain">
<!-----Form heading----->
<p> Tell us who you are </p>
<!-----Inout customer details----->
<p>
<label class="username" for="first Name">
First Name: </label>
<input type="text" name="firstname" id="first Name"
size="35" maxlength="40" /> </p>
<p>
<label class="username" for="Email">
Email: </label>
<input type="text" name="email" id="Email"
size="35" maxlength="40" /> </p>
<!-----Dropdown make----->
<p> Please select your make: </p>
<p>
<select name="make">
<option value="3M">3M</option>
<option value="3M">Acer</option>
<option value="3M">Ask</option>
<option value="3M">BenQ</option>
<option value="3M">Epson</option>
<option value="3M">Hitachi</option>
<option value="3M">InFocus</option>
<option value="3M">LG</option>
<option value="3M">Mitsubishi</option>
<option value="3M">NEC</option>
<option value="3M">Optoma</option>
<option value="3M">Panasonic</option>
<option value="3M">Philips</option>
<option value="3M">Samsung</option>
<option value="3M">Sanyo</option>
<option value="3M">Sharp</option>
<option value="3M">Sony</option>
<option value="3M">Toshiba</option>
<option value="3M">Viewsonic</option>
<option value="3M">Vivitek</option>
<option value="3M">Other</option>
</select> </p>
<!-----Submit picture of sticker----->
<p> Use the Choose File button to submit a picture of your model sticker if unsure what number to use: </p>
<p>
<input type="file" size="30" /> </p>
<!-----Text Area----->
<p> For any other comments or if you selected Other please specify here: </p>
<p>
<textarea name="comments" rows="5" cols="40">
Enter more comments here...
</textarea> </p>
<!-----Submit & Reset buttons----->
<p class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Clear the form" /> </p>
</form>
</fieldset>
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;
}
Problem
I have several form items that i would like floated left or right. However i can't seem to get them to do as they are told (possibly as I'm not telling them correctly).
So i have two sets of form items
info about car ---- should all be on the left
info about person - should all be on the right
What is currently looks like
as you can see ifs a mess!
My attempted solution
to inline float each item left or right
i.e
<div style="float:left">
<label>Engine<span class="small">Engine Size</span></label>
<select id="engine" name="engine-size">
<option value="1.0 Litre">1.0 Litre</option>
<option value="1.6 Litre">1.6 Litre</option>
<option value="1.2 Litre">1.2 Litre</option>
<option value="2.5 Litre">2.5 Litre</option>
<option value="3 Litre">3 Litre</option>
<option value="4+ Litre">4+ Litre</option>
</select>
</div>
However this approach doesn't entiry work as the "Model" is still on right side as well as "transmission".
Complete Code
CSS
/* ----------- My Form ----------- */
.form1{
float:left;
margin:0 auto;
width:900px;
height:500px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
/*border:solid 2px #b7ddf2;*/
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
/*border-bottom:solid 1px #b7ddf2;*/
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input, select, checkbox, radio{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
HTML
<div id="stylized" class="form1">
<form id="form1" method="POST" action="">
<div style="float:left">
<label>Make<span class="small">Choose the make.</span></label>
<select id="make" name="make" required autofocus style="float:left">
<option value="Default"></option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Aston Martin"> Aston Martin</option>
<option value="Audi"> Audi</option>
<option value="Bentley"> Bentley</option>
<option value="BMW">BMW</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari </option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai </option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia" >Kia</option>
<option value="Lamborghini">Lamborghini </option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Lotus">Lotus </option>
<option value="Maserati">Maserati </option>
<option value="Mazda"> Mazda</option>
<option value="Mercedes-Benz">Mercedes-Benz </option>
<option value="MG">MG </option>
<option value="Mini">Mini </option>
<option value="Mitsubishi">Mitsubishi </option>
<option value="Nissan">Nissan </option>
<option value="Noble">Noble </option>
<option value="Peugeot">Peugeot </option>
<option value="Porsche">Porsche </option>
<option value="Renault">Renault</option>
<option value="Rolls Royce"> Rolls Royce</option>
<option value="Rover">Rover</option>
<option value="Saab">Saab </option>
<option value="Seat">Seat </option>
<option value="Skoda">Skoda </option>
<option value="Smart" >Smart</option>
<option value="Subaru">Subaru </option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota"> Toyota</option>
<option value="TVR">TVR </option>
<option value="Vauxhall"> Vauxhall</option>
<option value="Volvo">Volvo </option>
<option value="Volkswagen">Volkswagen</option>
<option value="Other">Other</option>
</select>
</div>
<div style="float:right">
<label>Name<span class="required">*</span><span class="small">Add your name</span> </label>
<input type="text" id="name" name="name" placeholder="John Doe" required/>
</div>
<div style="float:left">
<label>Model<span class="required">*</span><span class="small">Add the model</span></label>
<input type="text" id="model" name="model" placeholder="Model of Car" style="float:left" required/>
</div>
<div style="float: left; ">
<label>Body Type<span class="small">Add body type</span></label>
<select id="body-type" name="body-type" style="float:left">
<option value="Hatchback">Hatchback</option>
<option value="Saloon">Saloon</option>
<option value="Estate">Estate</option>
<option value="Sports">Sports</option>
<option value="Convertable">Convertable</option>
<option value="Sports Utility Vehicle">Sports Utility Vehicle</option>
<option value="Other">Other</option>
</select>
</div>
<div style="float: right;">
<label>Email Address<span class="required">*</span><span class="small">Add Email Address</span></label>
<input type="email" id="email" name="email" placeholder="johndoe#example.com" required />
</div>
<div style="float: left;">
<label>Transimission<span class="small">Choose Transmission</span></label>
<label>Automatic</label>
<input type="radio" name="transmission" value="Manual">
<label>Manual</label>
<input type="radio" name="transmission" value="Automatic">
</div>
<div style="float:right">
<label>Telephone<span class="small">Add your Tel Number</span></label>
<input type="tel" id="telephone" name="telephone" placeholder="UK Telephone Number" input size="10" />
</div>
<div style="float:left">
<label>Color<span class="small">Choose you colour</span></label>
<input type="color" id="colour" name="colour" style="height:15px; width" required/>
</div>
<div style="float:right">
<label>Message<span class="required">*</span><span class="small">Additional Info</span></label>
<textarea id="message" stname="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"></textarea>
</div>
<div style="float:left">
<label>Engine<span class="small">Engine Size</span></label>
<select id="engine" name="engine-size">
<option value="1.0 Litre">1.0 Litre</option>
<option value="1.6 Litre">1.6 Litre</option>
<option value="1.2 Litre">1.2 Litre</option>
<option value="2.5 Litre">2.5 Litre</option>
<option value="3 Litre">3 Litre</option>
<option value="4+ Litre">4+ Litre</option>
</select>
</div>
<div style="float:left">
<label>Doors<span class="small">Number of Doors</span></label>
<select id="doors" name="doors">
<option value="3">3</option>
<option value="4">4</option>
<option value="5+">5+</option>
</select>
</div>
<div style="float:left">
<label>Age<span class="small">Age</span></label>
<select id="age" name="age">
<option value="Less than 1 Year">Less than 1 Year</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="5+">5+</option>
</select>
</div>
<div style="float:left">
<label>Fuel<span class="small">Fuel Type</span> </label>
<select id="fuel" name="fuel">
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="Electric">Electric</option>
<option value="Hybrid">Hybrid</option>
</select>
</div>
<div style="float:left">
<label>Milage<span class="small">Milage</span> </label>
<select id="milage" name="milage">
<option value="10,000 or Less">10,000 or Less</option>
<option value="75,000">75,000</option>
<option value="100,000">100,000</option>
<option value="150,000 or More">150,000 or More</option>
</select>
</div>
<div style="float:left">
<label>Max-Budget<span class="required">*</span><span class="small">Select your maximum budget limit</span></label>
<input type="text" id="max-price" name="max-price" placeholder="Maximum Price of Car" style="height:15px;" required/>
</div>
<div style="float:left">
<label>Min-Budget<span class="required">*</span><span class="small">Select your minimum budget limit</span></label>
<input type="text" id="min-price" name="min-price" placeholder="Minimum Price of Car" style="height:15px;" required/>
<p id="req-field-desc"> </p>
</div>
<div style="float:left"> <span class="required">*</span> indicates a required field </div>
<div style="float:right">
<input type="submit" value="Find My Car!" id="submit-button" />
</div>
</form>
</div>
Any pointers to what i need to do, or what i am missing would be great! Thanks
First, don't use inline styles.
Second, instead of having each field go left then right then left then right, try rearranging the form into 2 fieldsets, a left column fieldset and a right column fieldset (left being the car stuff, right being the personal stuff). This way, you only need to float 2 things, one left and one right. The fields inside those columns can just stack.
Note - I also added a <div class="form-group> around each 'part' of the form so they are block level.
E.g.
<form>
<fieldset id="car-info">
<div class="form-group">
<label>Model<span class="required">*</span><span class="small">Add the model</span></label>
<input type="text" id="model" name="model" placeholder="Model of Car" style="float:left" required/>
</div>
<div class="form-group">
<label>Transimission<span class="small">Choose Transmission</span></label>
<label>Automatic</label>
<input type="radio" name="transmission" value="Manual">
<label>Manual</label>
<input type="radio" name="transmission" value="Automatic">
</div>
</fieldset>
<fieldset id="personal-info">
<div class="form-group">
<label>Name<span class="required">*</span><span class="small">Add your name</span> </label>
<input type="text" id="name" name="name" placeholder="John Doe" required/>
</div>
<div class="form-group">
<label>Email Address<span class="required">*</span><span class="small">Add Email Address</span></label>
<input type="email" id="email" name="email" placeholder="johndoe#example.com" required />
</div>
</fieldset>
</form>
Example CSS
#car-info {
float: left;
width: 50%;
}
#personal-info {
float: right;
width: 50%;
}
fieldset {
padding: 0;
border: 0;
margin: 0;
}
label {
display: block;
}
.form-group {
margin-bottom: 20px;
}
Example
Related jsfiddle link: http://jsfiddle.net/7V4jm/
Try to separate the responsibilities of your files. Keep the content in your HTML and the styling in your CSS (try to avoid the style attribute in your HTML).
Take the car and people elements out of individual divs and place them inside a car stuff div and people stuff div:
1) Car stuff div
<div class="column"> <!-- Car stuff -->
<label>Make<span class="small">Choose the make.</span></label>
<select id="make" name="make" required autofocus style="float:left">
<option value="Default"></option>
</select>
<label>
Model<span class="required">*</span>
<span class="small">Add the model</span>
</label>
<input type="text" id="model" name="model" placeholder="Model of Car" style="float:left" required/>
<label>Body Type<span class="small">Add body type</span></label>
<select id="body-type" name="body-type" style="float:left">
<option value="Hatchback">Hatchback</option>
</select>
<label>Transimission<span class="small">Choose Transmission</span></label>
<label>Automatic</label>
<input type="radio" name="transmission" value="Manual">
<label>Manual</label>
<input type="radio" name="transmission" value="Automatic">
<label>Color<span class="small">Choose you colour</span></label>
<input type="color" id="colour" name="colour" style="height:15px; width" required/>
<label>Engine<span class="small">Engine Size</span></label>
<select id="engine" name="engine-size">
<option value="1.0 Litre">1.0 Litre</option>
</select>
<label>Doors<span class="small">Number of Doors</span></label>
<select id="doors" name="doors">
<option value="3">3</option>
</select>
<label>Fuel<span class="small">Fuel Type</span> </label>
<select id="fuel" name="fuel">
<option value="Petrol">Petrol</option>
</select>
<label>Milage<span class="small">Milage</span> </label>
<select id="milage" name="milage">
<option value="10,000 or Less">10,000 or Less</option>
</select>
</div> <!-- End car stuff -->
2) People stuff div
<div class="column"> <!-- Person stuff -->
<label>
Name<span class="required">*</span>
<span class="small">Add your name</span>
</label>
<input type="text" id="name" name="name" placeholder="John Doe" required/>
<label>Email Address<span class="required">*</span><span class="small">Add Email Address</span></label>
<input type="email" id="email" name="email" placeholder="johndoe#example.com" required />
<label>Telephone<span class="small">Add your Tel Number</span></label>
<input type="tel" id="telephone" name="telephone" placeholder="UK Telephone Number" input size="10" />
<label>Message<span class="required">*</span><span class="small">Additional Info</span></label>
<textarea id="message" stname="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"></textarea>
<label>Age<span class="small">Age</span></label>
<select id="age" name="age">
<option value="Less than 1 Year">Less than 1 Year</option>
</select>
<label>Max-Budget<span class="required">*</span><span class="small">Select your maximum budget limit</span></label>
<input type="text" id="max-price" name="max-price" placeholder="Maximum Price of Car" style="height:15px;" required/>
<label>Min-Budget<span class="required">*</span><span class="small">Select your minimum budget limit</span></label>
<input type="text" id="min-price" name="min-price" placeholder="Minimum Price of Car" style="height:15px;" required/>
<p id="req-field-desc"> </p><span class="required">*</span> indicates a required field
</div> <!-- End person stuff -->
Then add a column class to both divs with the following styling:
/* ----------- Columns ----------- */
.column {
width: 45%; /* or whatever width you prefer */
float: left;
}
Related jsfiddle link again: http://jsfiddle.net/7V4jm/