i have a form which i implemented form-inline and bootstrap-select . That is working fine for screen width> 768, however when i try to resize it to ipad size, it is no longer inline. How to solve my problems:
because i set data-width="auto" for bootstrap-select, it is no 100% (1 column) or 50%(2 columns, which is most ideal in ipad case to display two select box side by side). i tried many ways, e.g. resetting the attribute data-width to "50%" then call $('.selectpicker').selectpicker(render);, but failed, what to do?
the checkboxes are auto break into four lines, for ipad size, i think it is better to keep them in one line, what can i do?
JSFiddle links: http://jsfiddle.net/nc16ntwq/ as the codes cant appear
<form class="form-inline" style="margin:10px 0px;">
<div class="form-group">
<select id="date" name="date" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
</select>
</div>
<div class="form-group">
<select id="dateYear" name="dateYear" class="date selectpicker" data-width="auto">
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>
</div>
<div class="form-group">
<select id="toDate" name="toDate" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
</select>
</div>
<div class="form-group">
<select id="toDateYear" name="toDateYear" class="date selectpicker" data-width="auto">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019" selected>2019</option>
</select>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input id="v1" type="checkbox" checked> Value 1
</label>
</div>
<div class="checkbox">
<label>
<input id="v2" type="checkbox" checked> value 2
</label>
</div>
<div class="checkbox">
<label>
<input id="v3" type="checkbox"> value 3
</label>
</div>
<div class="checkbox">
<label>
<input id="v4" type="checkbox"> Values 4
</label>
</div>
</div>
</form>
JSFIddle. I only do this for dropdown. Just add this to you CSS
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
Related
Hello all I am very new to HTML and CSS and am currently working on a small lab for school. I am trying to have my two reset and submit button be horizontal with each other instead, they are one on top of the other. I am not supposed to change any of the HTML just make changes to the CSS code. The buttons are in a span element at the bottom. I added my form code to add more context
<form>
<span class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jaylen Carroll">
</span>
<span class="row">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
</span>
<span class="row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="jaylen#gmail.com">
</span>
<span class="row">
<label for="city">City</label>
<input type="city" id="city" name="city" placeholder="Ottawa">
</span>
<span class="row">
<label for="province">Province</label>
<select id="province" name="province">
<option>Please Select..</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="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</span>
<span class="row">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</span>
</form>
When you paste the code in an HTML editor it comes out like this:
How I need it to be:
My Css code looks like this:
h1{
text-align:center;
}
label{
margin-top: 16px;
font-weight: bold;
display: block;
text-align: center;
font-size: medium;
}
input{
text-align:center;
display: block;
margin: 15px;
width:150px;
}
form{
margin:0 auto;
width:215px;
}
HTML elements start on separate lines by default. One solution would be to put your buttons in a group with a div element then use the float CSS property to horizontally align them.
HTML
<div class="button-group">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</div>
CSS
.button-group input {
float: left;
}
You can refer to this w3 schools link for more information on button groups:
https://www.w3schools.com/howto/howto_css_button_group.asp
you can use display flex
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
Set flex:direction as column.
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.row{
display:flex;
flex-direction:column;
}
<form>
<span class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jaylen Carroll">
</span>
<span class="row">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
</span>
<span class="row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="jaylen#gmail.com">
</span>
<span class="row">
<label for="city">City</label>
<input type="city" id="city" name="city" placeholder="Ottawa">
</span>
<span class="row">
<label for="province">Province</label>
<select id="province" name="province">
<option>Please Select..</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="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</span>
<span class="row">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</span>
</form>
for the last class row which contains the 2 buttons you can replace its class name and apply this CSS to it
.class-name {
display:"flex",
// if you want to keep space between the two buttons
justify-content:"space-between"
// if not don't put `justify-content` and instead put a margin to one of the buttons to
// keep a little distance between them
}
so display "flex" is your friend when you want to group elements as a row
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 got 2 input fields below. One select another input text. I need it to stay inline even in mobile mode.
How do I prevent input fields within from breaking? They stay inline regardless of screen size.
<div class="col-sm-4">
<label class="control-label">Form label</label>
<div class="form-inline">
<div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text">
</div>
</div>
</div>
From http://getbootstrap.com/css/
Bootstrap's inline forms, as in:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<select class="form-control" >
<option>Thing One</option>
<option>Thing Two</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
States in the docs 'This only applies to forms within viewports that are at least 768px wide.'
You could directly force them to stay inline with a fluid width in CSS and floating the elements.
Ex: https://jsfiddle.net/cm94dup9/
You can use tables for both select field and text field.
In table you can specify the width of the so both are inline.
<table>
<tr><td><div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div></td></tr>
<tr><td>
<div class="form-group">
<input class="form-control" type="text">
</div>
</td></tr>
</table>
if you mean inline, both to be have same width and are on each other. Not that both are in same line.
What has worked for me is wrapping the label and input, select, checkbox, etc.. in a div tag.
<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form
I have a form that is divided into two sections both sitting next to each other. I am not sure how to go about this as I have read that some people use tables and others use lists? I am new to html and CSS but I would just put the two sections in divs and float one to the left. I read however that this is not a good method as divs are supposed to define two different things?
I have read a lot of questions and blogs about this but it's making me slightly more confused.I am just wanting to know the best way to go about this for this particular form.
Here is the code:
http://jsfiddle.net/EdZ32/
<div class="bookingForm">
<form action="">
<label for="flightType">
Please select your flight<br>
<select name="type" id="flightType">
<option value="Fixed Wing">Fixed Wing</option>
<option value="Helicopter">Helicopter</option>
<option value="Glider Flights">Glider Flights</option>
</select> <br>
</label>
<label for="numberPassengers">
Number of Passengers<br>
<select name="type">
<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><br>
</label>
<label for="startDate">
Start date <input type="date" name="startDate"><br>
</label>
<label for="departureTime">
Departure itme <input type="date" name="departureTime"><br>
</label>
<!--SECTION TWO -->
<label for="name">
Full Name* <input type="text" name="name"><br>
</label>
<label for="email">
Email* <input type="text" name="email"><br>
</label>
<label for="phoneNumber">
Phone Number* <input type="number" name="phoneNumber"><br>
</label>
<label for="postalAddress">
Postal Address <input type="text" name="postalAddress"><br>
</label>
<label for="city">
City <input type="text" name="city"><br>
</label>
<label for="additionalInfo">
Additional Information<br>
<textarea rows="10" cols="30" name="comment" form="usrform">
Enter text here...</textarea>
</label>
</form>
I would just use two different divs for this:
HTML
<div class="left">
<!-- Second Section Here-->
</div>
CSS
.bookingForm {width:600px;} /* Choose your custom width or no width at all */
.bookingForm .left {float:left;width:49%;}
.bookingForm .right {float:right;width:49%;}
Also, your Labels should not wrap all the imput elements but just the text like this:
<label for="additionalInfo">
Additional Information
</label>
I have updated your code on JSfiddle here:
http://jsfiddle.net/EdZ32/4/
i have edited your code and i hope this helps you
you must specify 2 division for each set of inputs you have. then put CSS to float them right to each other
<div id="sec1"></div>
<div id="sec2"></div>
Above was added to your code and a CSS for float.
JSFIDDLE
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/