How can i get the element the "keys_values" div next to the text box..i.e, all the elements inside the div should be visible next to the text box
<div id="edata" class="edata" >
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
<div class="keys_values" style="float:'left';">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
I'd recommend using this:
<div id="edata" class="edata">
<input type="text" class="users_percentage" placeholder="% of users" />
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
</div>
CSS:
.users_percentage {
width:65px;
float:left;
margin-right:4px;
}
.keys_values {
float: left;
}
.e_keys, .e_values {
width: 65px;
}
Using the classes your elements already have allows you to separate the style and structure of the page.
Note: margin-right: 4px was only added to match the other input's style. If you're using normalize.css or similar then it might not be necessary.
Here it is working: http://jsfiddle.net/Fr3kD/1/
Update: To add extra span elements below each other use this HTML:
<div class="keys_values">
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
<span>
<input type="text" class="e_keys" placeholder="key" />
<input type="text" class="e_values" placeholder="value" />
</span>
</div>
and add an extra CSS style:
.keys_values span{
display: block;
}
Here's a demo: http://jsfiddle.net/Fr3kD/3/
<div id="edata" class="edata" >
<div style="float:left; width:49%">
<input type="text" class="users_percentage" style="width:65px;" placeholder="% of users"/>
</div>
<div class="keys_values" style="float:left; width:49%">
<span>
<input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
<input type="text" class="e_values" style="width:65px;" placeholder="value"/>
</span>
</div>
</div>
Try this
<div class="keys_values" style="float:'left';margin:-26px 0 0 70px">
DEMO
Related
EDIT: I have updated both the CSS and the html. I have figured out the centering, but am still having trouble with the alignment of labels and fields.
I need for the input fields and labels to be lined up to where there is a perfect line running down the center of them, essentially dividing them because the labels are stacked on top of one another and input fields are stacked on top of one another.
The code below already resembled how I want it to look, other than that the form is on the left edge and my labels and input fields aren't perfectly lined up.
This is my form so far:
<div style="text-align:center">
<form>
<div>
Name: <input type="text" name="Name" size="40"/>
<br/>
<br/>
</div>
<div>
Address: <input type="text" name="Address" size="50"/>
<br/>
<br/>
</div>
<div>
City: <input type="text" name="City" size="25"/>
<br/>
<br/>
</div>
<div>
State: <input type="text" name="State" size="25"/>
<br/>
<br/>
</div>
<div>
Zip: <input type="text" name="Zip" size="25"/>
<br/>
<br/>
</div>
<div>
Email: <input type="text" name="Email" size="40"/>
<br/>
<br/>
</div>
<div>
Subscribe to our mailing list?
<br/>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div>
Comments:<br/>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input"></textarea>
<br/>
<br/>
<input type="submit" />
<input type="reset" />
</div>
</form>
</div>
So far, the only CSS I have for this form is:
form {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
This is what I am trying to accomplish:
Any help or advice would be great and highly appreciated, I am really just dumbfounded by this one. I tried using some of the centering methods for tables, none of which worked.
check this i just positioned it with css
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<style>label{
position: relative;
bottom: 2px;
}
input{
position: relative;
margin-top: 10px;
}
.text{
display: flex;
justify-content: center;
}
.text{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div style="text-align:center">
<form>
<div>
<label> Name:</label>
<input type="text" name="Name" size="40"/>
</div>
<div>
<label style="left:27px"> Address:</label>
<input type="text" name="Address" size="50" style="left:27px;"/>
</div>
<div>
<label style="right: 46px;">City: </label>
<input type="text" name="City" size="25" style="right:46px;"/>
</div>
<div>
<label style="right:48px">State:</label>
<input type="text" name="State" size="25"/ style="right: 49px;">
</div>
<div>
<label style="right: 43px;"> Zip:</label> <input type="text" name="Zip" size="25" style="right: 44px;"/>
</div>
<div>
<label style="bottom: 0px;" > Email:</label>
<input type="text" name="Email" size="40"/>
</div>
<div style="right: 180px; position: relative;" >
<label>Subscribe to our mailing list?</label>
<input type="radio" name="AddToList" value="yes" checked="checked" />Yes
<input type="radio" name="AddToList" value="no" />No
<br/>
<br/>
</div>
<div class="text">
<br>
<br>
<label style="top: 60px; left: 70px;"> Comments: </label>
<textarea name="comments" cols="70" rows="10" placeholder="Expected value of input" style="left: 84px; position: relative;"></textarea>
<br/>
<br/>
</div >
<div class="submit" style="right: 80px; position: relative;">
<input type="submit" width="" />
<input type="reset" />
</div >
</form>
</div>
<script src="test.js"></script>
</body>
</html>
For centering things, try:
margin: auto;
justify-content: center;
text-align: center
This should align all the contents in the page as well as the text also with margins being equal.
Second option:
margin: auto;
width: 80%
This will take only 80% of total width of parent element and will automatically be centered if that also doesn't work then remove margin: auto from second option.
To center align, give the elements you want to align a class of "center", and then select the class in CSS. An example is :
.center {
text-align: center;
}
<div>
Email: <input type="text" name="Email" size="40" class="center"/>
<br/>
</div>
EDIT : W3 Schools is where I found the answer.
I want to prevent irregular gaps between my inputs and my text. How should I do this with a CSS property?
For example that my input will be placed all over that red line:
My HTML:
<body>
<div>
<p class ="LabelInput">Programme/CP/Ville
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>
<div class = "Typologie">
<p class ="LabelInput">Typologie
<input type="checkbox" id="Studio" name="Studio" checked />
<label for="Studio">Studio</label>
<input type="checkbox" id="T2" name="T2" checked />
<label for="T2">T2</label>
<input type="checkbox" id="T3" name="T3" checked />
<label for="T3">T3</label>
<input type="checkbox" id="T4" name="T4" checked />
<label for="T4">T4</label>
<input type="checkbox" id="T5P" name="T5P" checked />
<label for="T5P">T5P</label>
</p>
</div>
<div class = "Type">
<p class ="LabelInput">Type
<input type="checkbox" id="Appartement" name="Appartement" checked />
<label for="Appartement">Appartement</label>
<input type="checkbox" id="Maison" name="Maison" checked />
<label for="Maison">Maison</label>
<input type="checkbox" id="Commerce" name="Commerce" checked />
<label for="Commerce">Commerce</label>
<input type="checkbox" id="Parking" name="Parking" checked />
<label for="Parking">Parking</label>
</p>
</div>
<div class = "Budget">
<p class ="LabelInput">Budget
<div id="slider-range"></div>
</p>
</div>
<div class = "Livraison">
<p class ="LabelInput">Livraison
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>
<div class = "Annexes">
<p class ="LabelInput">Annexes
<input type="text" id="cp" name="cp"
placeholder="" />
</p>
</div>
I'm sure it is something you can do but I can't remember or find the property.
You will need to make some adjustments to your HTML for the best results.
As p is not allowed to contain block-level elements, you can not put divs in it as seen in your Budget section.
Form the w3 site:
The P element represents a paragraph. It cannot contain block-level elements (including P itself).
Instead, add two div wrappers around your label and your content for a clean solution:
.LabelInput {
width: 30%;
display: inline-block;
}
.LabelContent {
width: 69%;
display: inline-block;
}
<div class = "Type">
<div class="LabelInput">Type</div>
<div class="LabelContent">
<input type="checkbox" id="Appartement" name="Appartement" checked />
<label for="Appartement">Appartement</label>
<input type="checkbox" id="Maison" name="Maison" checked />
<label for="Maison">Maison</label>
<input type="checkbox" id="Commerce" name="Commerce" checked />
<label for="Commerce">Commerce</label>
<input type="checkbox" id="Parking" name="Parking" checked />
<label for="Parking">Parking</label>
</div>
</div>
If you do not want to change your html, add a wrapper element like span around your label and set min-width on it. That is an easy, albeit dirty solution.
<div class="LabelInput"><span class="myLabel">Type</span></div>
.myLabel {
min-width: 200px //adjust as needed to size of biggest label
display: inline-block;
}
I have an form that I want to have a user fill in. I want to lay it out that the name fields are next to each other and all other fields are on their own separate line.
I have used the below code, have tried putting paragraphs and "brs" , but still no luck...
The code below:
<div style="float:left;">
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div style="float:right;">
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
Returns the below image:
So, for some reason the Email Address Label is very much out of place (it should be above the input that is reading 1500 - the way Phone is above number
I'm sure that it's a silly little thing, but I just can't place it
I have tried various combinations of "< p>" and "< br >",but to no avail.
You need to add "clear both" ( <div style="clear:both"></div> ) to prevent the content below mixed up with your 2 floating divs.
Example code:
<div style="float:left;">
<!-- something here -->
</div>
<div style="float:right;">
<!-- something here -->
</div>
<div style="clear:both"></div>
<!-- more goes here -->
I would use something like Bootstrap, if I were you. However, here's a custom solution:
input {
width: 100%;
display: block;
}
div.inline {
width: 100%;
display: table;
}
div.inline div {
display: table-cell;
}
div.inline div:nth-child(n+2) {
padding-left: 10px;
}
<div class="inline">
<div>
<label>First Name:</label>
<input>
</div>
<div>
<label>Last Name:</label>
<input>
</div>
</div>
<div>
<label>Email:</label>
<input>
</div>
<div>
<label>Phone:</label>
<input>
</div>
wrap your bottom 3 inputs and labels in a div and add 100% width to each input and label
<div style="width:100%;clear:both;display:block;">
<label style="width:100%;display:block;"></label
<input style="width:100%;display:block;">
</div>
.flexi{
display:flex;
flex-flow:row;
}
<div class="flexi">
<div>
<label for="username"><b>First Name*</b><span class="required"></span> </label>
<input id="user_first_name" name="FirstName" size="30" type="text" placeholder="First" />
</div>
<div>
<label for="name"><b>Last Name*</b><span class="required"></span></label>
<input id="user_last_name" name="LastName" size="30" type="text" placeholder="Last"/>
</div>
</div>
<div>
<!--<label><b>Full Name </b><span class="required">*</span></label><input type="text" name="FirstName" class="field-divided" placeholder="First" style="float:left" />;<input type="text" name="Surname" class="field-divided" placeholder="Last" style="float:right"/> <p></p>-->
<div>
<label><b>Email </b><span class="required">*</span></label><input type="email" name="Email" class="field-long" placeholder="Email" value="<?php echo $_POST['Turnover']; ?>" />
</div>
<div>
<label><b>Phone </b><span class="required">*</span></label><input type="number" name="Phone" class="field-divided" placeholder="Number" />
<label style="font-size:10px">only numbers, no special characters</label>
</div>
</div>
Read about css and html on internet .
Floating causes parent to remove height. thats why yo email pops in mill
https://jsfiddle.net/d69Lxmst/3/
I've a template for a register mask. I use the <p> because my input boxes does not have a id only class.
It should look like in the illustration with 2 rows. I do not like extra div's, no table. Is it possible ?
HTML (elements can be in a different order)
<div id="parent">
<p class="Useraccount-Email-Repeat-Label"></p>
<input class="Useraccount-Email-Repeat" type="text" />
<p class="Useraccount-Password-Repeat-Label"></p>
<input class="Useraccount-Password-Repeat" type="text" />
<p class="Useraccount-Email-Label"></p>
<input class="Useraccount-Email" type="text" />
<p class="Useraccount-Password-Label"></p>
<input class="Useraccount-Password" type="text" />
</div>
try this:
HTML:
<div id="parent">
<p class="Useraccount-Email-Repeat-Label"></p>
<input class="Useraccount-Email-Repeat" type="text" />
<p class="Useraccount-Email-Label"></p>
<input class="Useraccount-Email" type="text" />
<p class="Useraccount-Password-Label"></p>
<input class="Useraccount-Password" type="text" />
<p class="Useraccount-Password-Repeat-Label"></p>
<input class="Useraccount-Password-Repeat" type="text" />
</div>
CSS:
#parent p,
#parent input{margin:0 2% 2%;float:left;width:48%;display:block}
#parent input{border:1px solid #ccc; border-radius:3px}
I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line. For example the following form below i want the First and Last name on the same line rather then one below the other.
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div>
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="user_email" name="user[email]" size="30" type="text" />
</div>
<div>
<label for="pass1">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
</div>
<div>
<label for="pass2">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
Put style="float:left" on each of your divs:
<div style="float:left;">...........
Example:
<div style="float:left;">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div style="float:left;">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div style="clear:both;"> </div>
Of course, you can also create classes in the CSS file:
.left{
float:left;
}
.clear{
clear:both;
}
And then your html should look like this:
<div class="left">
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
</div>
<div class="left">
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
To put an element on new line, put this div below it:
<div class="clear"> </div>
More Info:
CSS Float Clear Tutorial
The default display style for a div is "block." This means that each new div will be under the prior one.
You can:
Override the flow style by using float as #Sarfraz suggests.
or
Change your html to use something other than divs for elements you want on the same line. I suggest that you just leave out the divs for the "last_name" field
<form action="/users" method="post"><div style="margin:0;padding:0">
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<label for="name">Last Name</label>
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
... rest is same
For the sake of bandwidth saving, we shouldn't include <div> for each of <label> and <input> pair
This solution may serve you better and may increase readability
<div class="form">
<label for="product_name">Name</label>
<input id="product_name" name="product[name]" size="30" type="text" value="4">
<label for="product_stock">Stock</label>
<input id="product_stock" name="product[stock]" size="30" type="text" value="-1">
<label for="price_amount">Amount</label>
<input id="price_amount" name="price[amount]" size="30" type="text" value="6.0">
</div>
The css for above form would be
.form > label
{
float: left;
clear: right;
}
.form > input
{
float: right;
}
I believe the output would be as following:
I would go with Larry K's solution, but you can also set the display to inline-block if you want the benefits of both block and inline elements.
You can do this in the div tag by inserting:
style="display:inline-block;"
Or in a CSS stylesheet with this method:
div { display:inline-block; }
Hope it helps, but as earlier mentioned, I would personally go for Larry K's solution ;-)
You should put the input for the last name into the same div where you have the first name.
<div>
<label for="username">First Name</label>
<input id="user_first_name" name="user[first_name]" size="30" type="text" />
<input id="user_last_name" name="user[last_name]" size="30" type="text" />
</div>
Then, in your CSS give your #user_first_name and #user_last_name height and float them both to the left. For example:
#user_first_name{
max-width:100px; /*max-width for responsiveness*/
float:left;
}
#user_lastname_name{
max-width:100px;
float:left;
}
You could use the {display: inline-flex;}
this would produce this:
inline-flex