floating form items left and right? - html

Question

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

Answer 1

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

Answer 2

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/