How do I get the text input boxes to line up?
The password input box is slightly to the left, it is not aligned with the username text input box.
I am using Java, in Eclipse.
<div>
<div id="header">
<h1>Login</h1>
</div>
<form name="loginform">
<fieldset>
<legend>Login Form</legend>
<label>Username:
<input type="text" name="username" /><span>*</span>
</label>
<label>Password:
<input type="password" name="pass" /><span>*</span>
</label>
<input type="reset" class="resetButton" />
<input type="submit" value="Login" class="submitButton" />
</fieldset>
</form>
</div>
If you want it to be dynamic, you need a grid (row/column) structure, and the best one (cross browser) today is display: table, as display: grid is still widely unsupported (working draft | caniuse)
h1 {letter-spacing: 1px; font-size: .4in; color: green;}
legend {font-variant: small-caps; font-weight: bold}
fieldset{width: 300px; font-family: Arial, sans-serif;
background-color : limegreen}
label {display: block; position: relative; line-height: 2;}
.text {position: absolute; margin-left: 20px; width: 15em; left: 80px}
.grid {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
padding: 6px 0 0 6px;
}
.col.after:after {
content: ' *';
color: red;
}
<div>
<div id="header">
<h1>Login</h1>
</div>
<form name="loginform">
<fieldset>
<legend>Login Form</legend>
<div class="grid">
<div class="row">
<div class="col">
<label for="username">Username:</label>
</div>
<div class="col after">
<input type="text" name="username" id="username"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="pass">Password:</label>
</div>
<div class="col after">
<input type="password" name="pass" id="pass"/>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col">
<input type="reset" class ="resetButton"/>
<input type="submit" value = "Login" class="submitButton"/>
</div>
</div>
</div>
</fieldset>
</form>
</div>
In a perfect W3 standard world, your label would be a field that stands on its own, not a field that encapsulates the input. So, for instance:
<label for="username">Username:</label>
<input id="username" type="text" name="username"/><span>*</span>
The "for" tag refers to the ID of the input field that you'd have to add. Styling, then would be as simple as adding on a width to the style of the label. For positioning purposes, you could display-inline on the required asterisk to position it after the input.
Enclose the username and password labels in an inline-block span and give that span a width.
Your updated html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Test</title>
</head>
<body>
<style tpye ="text/css">
h1 {letter-spacing: 1px; font-size: .4in; color: green;}
span {color: red}
legend {font-variant: small-caps; font-weight: bold}
fieldset{width: 300px; font-family: Arial; sans-serif;
background-color : limegreen}
label {display: block; position relative; line-height: 2;
margin: 10px 0px;}
.text {position: absolute; margin-left: 20px; width: 15em; left: 80px}
span.myspan{width: 100px; display:inline-block;}
</style>
<div>
<div id="header">
<h1>Login</h1>
</div>
<form name="loginform">
<fieldset>
<legend>Login Form</legend>
<label><span class="myspan">Username:</span> <input type="text" name="username"/><span>*</span></label>
<label><span class="myspan">Password:</span> <input type="password" name="pass"/><span>*</span></label>
<input type="reset" class ="resetButton"/>
<input type="submit" value = "Login" class="submitButton"/>
</fieldset>
</form>
</div>
</body>
</html>
Test here: https://jsfiddle.net/nabtron/d4cr66oa/
This one worked, thank you.
h1 {letter-spacing: 1px; font-size: .4in; color: green;}
legend {font-variant: small-caps; font-weight: bold}
fieldset{width: 300px; font-family: Arial, sans-serif;
background-color : limegreen}
label {display: block; position: relative; line-height: 2;}
.text {position: absolute; margin-left: 20px; width: 15em; left: 80px}
.grid {
display: table;
}
.row {
display: table-row;
}
.col {
display: table-cell;
padding: 6px 0 0 6px;
}
.col.after:after {
content: ' *';
color: red;
}
<div>
<div id="header">
<h1>Login</h1>
</div>
<form name="loginform">
<fieldset>
<legend>Login Form</legend>
<div class="grid">
<div class="row">
<div class="col">
<label for="username">Username:</label>
</div>
<div class="col after">
<input type="text" name="username" id="username"/>
</div>
</div>
<div class="row">
<div class="col">
<label for="pass">Password:</label>
</div>
<div class="col after">
<input type="password" name="pass" id="pass"/>
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col">
<input type="reset" class ="resetButton"/>
<input type="submit" value = "Login" class="submitButton"/>
</div>
</div>
</div>
</fieldset>
</form>
</div>
Related
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
I have this few line of html code i want to arrange the label and input side by side with the label on top of the input with css but am not able to work around it. I found similar question herewhich suggest use of display:inline-block; to achieve that but after including it in my code an not able to do it.
body {
background-color: red;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="" , method="">
<div id="styleform">
<label for="NAME">   FIRST NAME</label></br>
<input type="text" id="NAME" size="20"></br>
</br>
<label for="no">   NUMBER</label></br>
<input type="number" id="no" , size="45"></br>
</br>
<label for="age">   AGE</label></br>
<input type="number" id="age" size="45"></br>
</br>
<label for="S_NO:">   CODE</label></br>
<input type="text" id="S_NO:" size="20"></br>
</br>
</div>
</form>
</div>
I think this kind of easy question for some of you this new be in web development
This how i want it to look like
UPDATE
Updated fiddle after image provided
#LAS You are inserting line breaks, that is part of the problem. I have created this fiddle, fixing several things: https://jsfiddle.net/Lu5k1yk8/6/
Added ; after your spaces
fixed the line breaks (I believe the syntax should be <br> or <br />, not </ br> and removed them after labels
Changed your CSS for the textboxes to inline-table
Increased width of labels so they do not create new lines
Also, I would suggest not using spaces (nbsp;) or <br />'s and instead using CSS to create the correct spaces and line breaks.
Here is a good demonstration of how to use padding and margins: http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html
Just remove br tag and add this to your code
input[type="text"] + label {
display: inline;
}
I think the best way is to take the label and input in a table.enter code here<table>
<tr><th>label</th><td><input type="text"></td></tr></table>
I changed your code a bit, I hope this is what you are looking for:
I set label into an inline-block element and set its min-width to 150px, and removed the margin-left: 150px;.
Also, if you use  , you need to add a semicolon at the end of it: , and with the </br> you need to add the slash at the end: <br />
body{
background-color: red;
}
label {
display: block;
min-width: 150px;
}
.test {
display: inline-block;
width: 45%;
background-color: white;
border: solid 1px blue;
padding: 5px 10px;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="", method="">
<div id="styleform">
<div class="test">
<label for="NAME" >FIRST NAME</label>
<input type="text" id="NAME" size="20"><br /><br />
</div>
<div class="test">
<label for="no" >NUMBER</label>
<input type="number" id="no", size="45"><br /><br />
</div>
<div class="test">
<label for="age" >AGE</label>
<input type="number" id="age" size="45"><br /><br />
</div>
<div class="test">
<label for="S_NO:" >CODE</label>
<input type="text" id="S_NO:" size="20"><br /><br />
</div>
</div>
</form>
</div>
**EDIT: ** I have changed the code. Hope this helps you this time ;)
Hope this helps.
Do you mean something like this?
.block {
display: block;
}
.inline-block {
display: inline-block;
width: 49%;
}
body {
padding: 10px;
}
<div id=tk>
<form action="" method="">
<div id="styleform">
<div class="inline-block">
<label class="block" for="NAME">FIRST NAME</label>
<input class="block" type="text" id="NAME" size="20">
</div>
<div class="inline-block">
<label class="block" for="no">NUMBER</label>
<input class="block" type="number" id="no" , size="45">
</div>
<div class="inline-block">
<label for="age" class="block" >AGE</label>
<input type="number" class="block" id="age" size="45">
</div>
<div class="inline-block">
<label class="block" for="S_NO:">CODE</label>
<input type="text" class="block" id="S_NO:" size="20">
</div>
</div>
</form>
</div>
Goal: I am trying to make a form for users to submit their school schedule
Problem: the first of my input tags will not let me type an input. All the input sections are set up the same accept for their place holder text. they all follow the same pattern and have the same classes applied.
Notes: I know you are able to type in the input field inside of the snippet but it does not work when implemented into my full webpage. Also I'm fairly new to HTML/CSS so excuse the fact that my code is kinda messy. Any constructive criticism is openly accepted.
.form {
width: 680px;
height: 870px;
}
.inputConatiner {
height: 75px;
width: 680px;
display: inline-block;
float: left;
}
.textContainer {
height: 75px;
width: 405px;
display: inline-block;
}
.submitContainer {
width: 100%;
height: 40px;
position: relative;
}
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 50%;
top: 2075%;
margin: 0 0 0 -75px;
}
input[type="text"] {
border: black 0px solid;
border-radius: 20px;
background-color: rgb(230, 230, 230);
padding-top: 13px;
padding-bottom: 13px;
font-family: "Arial";
}
input[type="radio"] {
height: 30px;
width: 30px;
margin: 0;
vertical-align: middle;
}
input[type="submit"] {
height: 40px;
width: 150px;
border: black 0px solid;
border-radius: 20px;
}
label[for="A"],
label[for="B"] {
display: inline-block;
width: 160px;
font-family: "Arial";
}
fieldset {
border: black 0px solid;
padding: 0px;
}
.label {
width: 270px;
height: 40px;
font-family: "Nunito Sans";
font-size: 30px;
display: inline-block;
background-color: rgb(104, 255, 144);
border-radius: 20px;
text-align: center;
vertical-align: middle;
}
input {
width: 200px;
}
<head>
<title>Side Project</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
</head>
<div class="form">
<form method="post" action="#" name="getStudentInfo">
<div class="inputConatiner">
<h1 class="label">Enter Your Name</h1>
<div class="textContainer">
<input type="text" placeholder="First" required />
<input type="text" placeholder="Last" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">1A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4A Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">A Day Lunch</h1>
<input type="radio" id="A" name="lunchADay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchADay" />
<label for="B">Second Lunch</label>
</div>
<div class="inputConatiner">
<h1 class="label">1B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">2B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">3B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">4B Class</h1>
<div class="textContainer">
<input type="text" placeholder="Class" required />
<input type="text" placeholder="Teacher" required />
</div>
</div>
<div class="inputConatiner">
<h1 class="label">B Day Lunch</h1>
<input type="radio" id="A" name="lunchBDay" />
<label for="A">First Lunch</label>
<input type="radio" id="B" name="lunchBDay" />
<label for="B">Second Lunch</label>
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
</div>
You have floated the row elements but not cleared them. As a result, the submit button's container element sits at the top of the page, partially overlapping the rows, even though the button itself has been pushed to the bottom (using absolute positioning).
Instead of doing this, you need to first clear the floated elements using .submitContainer, and center-align the button within it:
.submitContainer {
width: 100%;
height: 40px;
position: relative;
/* CLEAR THE FLOATED ROWS */
clear: both;
/* CENTER-ALIGN THE CONTENTS OF THIS CONTAINER */
text-align: center;
}
Next, remove the absolute positioning from the .submit element itself, as well as the negative margin (since it is now being aligned by its container):
.submit {
height: 40px;
width: 150px;
display: inline-block;
/* position: absolute; <- REMOVE THIS */
/* left: 50%; <- REMOVE THIS */
/* top: 2075%; <- REMOVE THIS */
/* margin: 0 0 0 -75px; <- REMOVE THIS */
}
That will allow the submit container and button to sit below the form without having to push it down.
The problem is that your wrapper div for submit button is overlapping the first input. Since you've used float: left in all your inputs, try and contain all of them in one div tag.
Add this to your css
.clearfix::after {
content: "";
clear: both;
display: table;
}
And wrap your inputs like
<form method="post" action="#" name="getStudentInfo">
<div class="clearfix">
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="inputConatiner">
...
</div>
<div class="submitContainer">
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
</div>
</form>
Let me start by telling that your css and containers work needs more working...
Your first input tag did not let you type since the "submitcontainer" was overlapping the input tags... I removed the submit Container and positioned the submit button slightly... But I implore you to learn some styling and not dependent on absolute positions...
<div class="submit">
<input type="submit" placeholder="Submit" />
</div>
.submit {
height: 40px;
width: 150px;
display: inline-block;
position: absolute;
left: 30%;
top: 100%;
margin: 0 0 0 -75px;
}
Codepen link: https://codepen.io/anon/pen/MrJGrN
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
I am creating a form for a landing page, so I want to keep the text input field side by side so I don't make the form very long.I trying to do something like this :
But it seems really difficult right now, this is what my form current looks like:
.teaser-right {
float: right;
width: 45%;
margin: 3% 0 0 0
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
Add this to your CSS:
.form-section{
display:inline-block;
}
To put 2 input fields beside each other you can use of float. if you float the elements you need to make sure you use the clearfix hack on the parent div. Otherwise the parent div won't have a height.
Another option is to use display: inline-block If you use display inline-block you need to reset the font-size on the parent to 0. The elements that where you use display: inline-block need to get the font-size: 12px; for example. With display inline-block you can get a slight height difference.
Example:
float: left;
https://jsfiddle.net/ymma61hu/3/
Clearfix hack:
https://css-tricks.com/snippets/css/clear-fix/
Example 2:
display: inline-block;
https://jsfiddle.net/vh49gtzL/
Hi just put input elements inside same div see fiddle. https://jsfiddle.net/v5omym1a/
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
I cleaned up your markup a bit. You don't need to wrap your <h3> and <h4> in div-s - those are block level elements as well and can be perfectly styled.
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0;
overflow: hidden;
}
.form-section {
float: left;
width: 50%;
}
label {
display: block;
margin-bottom: .25em;
}
<div id="calltoaction-form" class="teaser-form">
<h3 class="form-title">sample form</h3>
<form id="contact_form" action="_contact-us.php" method="post">
<h4 class="form-header">Personal details</h4>
<div class="form-section">
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<label for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</form>
</div>
.form-section {
float: left;
margin: 1%;
width: 48.5%;
}
.form-section input {
width: 100%;
}
.form-section:first-child {
margin-left: 0;
}
.form-section:last-child {
margin-right: 0;
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 100%;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-container">
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</div>