I have multiple Search boxes/buttons horizontally next to each other. I just want the labels to be positioned above the search boxes instead of next to them. If anyone has a quick fix for making radio buttons align vertically correctly I'd appreciate help with that also.
I tried putting the labels in containers and setting the position to absolute but it made the drop downs and radio buttons no longer work.
#search, form {
display: inline-block;
}
label {
display:inline-block;
}
<center>
<form>
<label>Search By Employee</label>
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
<label>Select By Item</label>
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
</form>
<form>
<input type="radio" name="time" value="before"> Before<br>
<input type="radio" name="time" value="after"> After<br>
</form>
<form>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
</form>
</center>
try this one, I just created divs nesting the elements that you pretend to view above each other and set display: flex and flex-flow:column
#search, form {
display: inline-block;
}
label {
display:inline-block;
}
.flexs {
display:flex;
flex-flow: column;
}
<center>
<form>
<div class="flexs">
<label>Search By Employee</label>
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
</div>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
<div class="flexs">
<label>Select By Item</label>
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
</div>
</form>
<form>
<div class="flexs">
<input type="radio" name="time" value="before"> Before<br>
<input type="radio" name="time" value="after"> After<br>
</div>
</form>
<form>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
</form>
</center>
I ended up just making a table for it with no borders. People say not to use tables but this made it 10 times easier. Here is the code I eventually used. If anyone has a method without using tables please inform us. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title> Asset Tracking System</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: None;
text-align: left;
padding: 8px;
}
.Container {
display: inline-block;
}
.Row {
display: table-row;
}
.Cell {
display: table-cell;
}
#search, form {
display: inline-block;
padding-top: 10px;
}
label {
display: inline-block;
}
</style>
</head>
<body>
<nav class="Container">
<nav class="Row">
<nav class="Cell" style="width:100px;background:blue;color:white;border-style:solid;border-color:black;border-width:2px 0px 2px 2px; border-radius:5px 0px 0px 5px; padding-left:10px;">Asset Search</nav>
<nav class="Cell" style="width:100px;background:blue;color:white;border-style:solid;border-color:black;border-width:2px 0px 2px 2px; padding-left:10px;">Help</nav>
<nav class="Cell" style="width:100px;background:blue;color:white;border-style:solid;border-color:black;border-width:2px 2px 2px 2px; padding-left:10px;border-radius:0px 5px 5px 0px">Logout</nav>
</nav>
</nav>
<center>
<h2>Asset Tracking</h2>
<table>
<tr>
<th><center>Search By Employee Info</center></th>
<th><center>Search By Item Info</center></th>
</tr>
<tr>
<td>
<div class="Cell" style="padding-top:30px;">
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
</div>
</td>
<td>
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
<form>
<input type="radio" name="time" value="before"> Before<br>
<input type="radio" name="time" value="after"> After<br>
</form>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
</td>
</table>
</center>
</body>
</html>
Related
So far everything is lined up except the last search box. I'm kinda new and it's taking me way to long to figure this out. I need to align all of my search boxes, drop downs, and radio buttons on the same line and centered. The search buttons and radio buttons keep moving to the line below. I added float left to the form and it brought the radio button up but it seems out of alignment. Ill be adding a calendar option and need it all on the same line. what's the best way to do this?
.table
{
float:left;
}
<div class="table">
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
</div>
<form>
<input type="radio" name="Before" value="male"> Before<br>
<input type="radio" name="After" value="female"> After<br>
</form>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
This will put everything in one line.
.table {
display: inline-block
}
.Search {
width: 10%
}
<div class="table">
<select>
<option value="Last Name">Last Name</option>
<option value="First Name">First Name</option>
<option value="Employee ID">Employee ID</option>
<option value="Job ID">Job ID</option>
<option value="Phone">Phone</option>
<option value="Ipad Number">Ipad Number</option>
</select>
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
<select>
<option value="Phones">Phones</option>
<option value="Tablets">Tablets</option>
<option value="Computers">Computers</option>
<option value="Cellphone">Cellphone</option>
<option value="Docks">Docks</option>
<option value="Monitors">Monitors</option>
<option value="Gloves">Gloves</option>
<option value="Sleeves">Sleeves</option>
</select>
<input type="radio" name="Before" value="male"> Before
<input type="radio" name="After" value="female"> After
<input type="text" name="text" class="Search" placeholder="Search Here" />
<input type="submit" class="submit" value="Search" />
</div>
Forms are block elements. You can change this via CSS:
form { display: inline }
or
form {display: inline-block }
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 am making a Guestbook page right now and am having trouble aligning the input fields so it looks nice. Right now it looks very ugly and not organized. I just want everything (the inputs) to line up nicely. Thank you!
html:
<form>
Name <input type="text" name="guest" id="guest" input size="45" maxlength="40" required/> <br />
E-mail address <input type="text" name="email" id="email" input size="60" maxlength="60" required/> <br />
City <input type="text" name="city" id="city" input size="35" maxlength="30" required/> <br />
<select id="province" name="province" size="15" required>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario" selected="selected">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select> <br />
Web Page URL <input type="text" name="web_url" id="web_url" input size="60" maxlength="60" /> <br />
Web Page Title <input type="text" name="web_title" id="web_title" input size="25" /> <br />
<textarea rows="4" cols="50" name="comments" id="comments" >
Enter comments here...</textarea>
</form>
CSS:
body {
max-width: 1000px;
font-size: 14px;
line-height: 1.4em;
font-family: Helvetica, Verdana, sans-serif;
}
Wrap labels with <label> tag:
<label>Name </label><input type="text" name="guest" id="guest" input size="45" maxlength="40" required/> <br />
Then add css:
label{width: 200px; float: left;}
Full code snippet
For horizontal align:
Put all your inputs in a <div> tag and add this css to it:
div {
float: left;
}
For vertical align:
Put all your inputs as a <div> and make each input a list:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Use this CSS:
div li {
float: left;
}
The secret is DIVs.
Use an outer div to surround each grouping, and inner divs for each inline group (left = title, right = input field).
Note that the inner divs are floated left -- this places them side by side. But it also removes them from the HTML "flow" and the .outer divs will have zero height. So, we add overflow:______ (auto or hidden) to counter this. Try removing the overflow:hidden and watch everything go to pieces.
jsFiddle for experimenting
body {
max-width: 1000px;
font-size: 14px;
line-height: 1.4em;
font-family: Helvetica, Verdana, sans-serif;
}
.outer{overflow:hidden;margin-bottom:5px;}
.in_left {float:left;width:100px;padding-right:10px;text-align:right;}
.in_right{float:left;width:250px;}
.in_right input{width:250px;}
.outer:last-of-type{margin-bottom:25px;}
<form>
<div class="outer">
<div class="in_left">Name</div>
<div class="in_right"><input type="text" name="guest" id="guest" size="45" maxlength="40" required/></div>
</div><!-- .outer -->
<div class="outer">
<div class="in_left">E-mail address </div>
<div class="in_right"><input type="text" name="email" id="email" size="60" maxlength="60" required/> </div>
</div><!-- .outer -->
<div class="outer">
<div class="in_left">City</div>
<div class="in_right"><input type="text" name="city" id="city" size="35" maxlength="30" required/></div>
</div><!-- .outer -->
<select id="province" name="province" size="15" required>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario" selected="selected">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select> <br />
Web Page URL <input type="text" name="web_url" id="web_url" size="60" maxlength="60" /> <br />
Web Page Title <input type="text" name="web_title" id="web_title" size="25" /> <br />
<textarea rows="4" cols="50" name="comments" id="comments" >
Enter comments here...</textarea>
</form>
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/
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>