I created a form and I want the content of the form to all be left-aligned. The inputs and paragraphs in the form end up on top of each other when I use float: left; so I am trying to figure out how to properly implement this so they are all neatly stacked on top of one another.
The header is in a perfect position as is. I only want the form to be left aligned.
* {
box-sizing: border-box;
}
body {
background-color: black;
margin-left: 20%;
margin-right: 20%;
margin-top: 3%;
}
button {
background-color: white;
border: none;
color: black;
float: left;
font-family: Gilroy-Bold;
font-size: 57px;
height: 110px;
margin-bottom: 40px;
margin-top: 40px;
width: 300px;
}
button:hover {
background-color: lightgray;
}
form {
float: left;
}
textarea {
float: left;
font-family: Gilroy;
font-size: 25px;
height: 400px;
padding-left: 10px;
padding-top: 5px;
width: 600px;
}
#font-face {
font-family: Gilroy;
color: white;
src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
font-family: Gilroy;
padding-top: 20px;
padding-bottom: 40px;
}
h1 {
color: white;
font-family: Gilroy-Bold;
font-size: 95px;
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
}
hr {
border: 0;
border-bottom: 1px solid white;
border-top: 12px solid white;
width: 760px;
}
input {
float: left;
font-family: Gilroy;
font-size: 25px;
padding-left: 5px;
height: 50px;
width: 500px;
}
p{
color: white;
float: left;
font-family: Gilroy-Bold;
font-size: 30px;
}
<DOCTYPE! html>
<html>
<head>
<title>1520 Sedgwick Avenue - Sign The Petition</title>
<link href="css/form.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="petition.js"></script>
</head>
<body>
<header>
<hr>
<h1>SIGN THE PETITION</h1>
<hr>
</header>
<div class="col-sm-6 col-sm-offset-3">
<form action="petition.php" method="POST">
<p>FIRST NAME</p>
<div id="first-name-group" class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" name="first-name" placeholder="John">
</div>
<p>LAST NAME</p>
<div id="last-name-group" class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" name="last-name" placeholder="Smith">
</div>
<p>EMAIL</p>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" placeholder="jsmith#gmail.com">
</div>
<p>COUNTRY</p>
<div id="country-group" class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" name="country" placeholder="United States">
</div>
<p>STREET ADDRESS</p>
<div id="street-address-group" class="form-group">
<label for="street-address">Street Address</label>
<input type="text" class="form-control" name="street-address" placeholder="123 Brick Lane">
</div>
<p>ZIP CODE</p>
<div id="zip-code-group" class="form-group">
<label for="zip-code">Zip Code</label>
<input type="text" class="form-control" name="zip-code" placeholder="12345">
</div>
<p>COMMENT (OPTIONAL)</p>
<div id="comment-group" class="form-group">
<label for="comment">Comment</label>
<textarea rows "4" cols = "50" type="text" class="form-control" name="comment" placeholder="I'm signing because..."></textarea>
</div>
<button type="submit" class="btn btn-success">SUBMIT</button>
</form>
</div>
</body>
</html>
Cleared form-group class. Because you are floating the inputs to left. The wrapper of it which is form-group must clear itself so that the next div can come after it.
I also made paragraph tag to take 100% width.
Also note that for refers to the name attribute in the <input> tag in your code. It should refer to the id attribute. [ Mentioned by - Roy_Dorsthorst]
* {
box-sizing: border-box;
}
body {
background-color: black;
margin-left: 20%;
margin-right: 20%;
margin-top: 3%;
}
button {
background-color: white;
border: none;
color: black;
float: left;
font-family: Gilroy-Bold;
font-size: 57px;
height: 110px;
margin-bottom: 40px;
margin-top: 40px;
width: 300px;
}
.form-group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
button:hover {
background-color: lightgray;
}
form {
float: left;
}
textarea {
float: left;
font-family: Gilroy;
font-size: 25px;
height: 400px;
padding-left: 10px;
padding-top: 5px;
width: 600px;
}
#font-face {
font-family: Gilroy;
color: white;
src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
font-family: Gilroy;
padding-top: 20px;
padding-bottom: 40px;
}
h1 {
color: white;
font-family: Gilroy-Bold;
font-size: 95px;
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
}
hr {
border: 0;
border-bottom: 1px solid white;
border-top: 12px solid white;
width: 760px;
}
input {
float: left;
font-family: Gilroy;
font-size: 25px;
padding-left: 5px;
height: 50px;
width: 500px;
}
p{
color: white;
float: left;
font-family: Gilroy-Bold;
font-size: 30px;
width: 100%;
}
<DOCTYPE! html>
<html>
<head>
<title>1520 Sedgwick Avenue - Sign The Petition</title>
<link href="css/form.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="petition.js"></script>
</head>
<body>
<header>
<hr>
<h1>SIGN THE PETITION</h1>
<hr>
</header>
<div class="col-sm-6 col-sm-offset-3">
<form action="petition.php" method="POST">
<p>FIRST NAME</p>
<div id="first-name-group" class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" name="first-name" placeholder="John">
</div>
<p>LAST NAME</p>
<div id="last-name-group" class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" name="last-name" placeholder="Smith">
</div>
<p>EMAIL</p>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="jsmith#gmail.com">
</div>
<p>COUNTRY</p>
<div id="country-group" class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="United States">
</div>
<p>STREET ADDRESS</p>
<div id="street-address-group" class="form-group">
<label for="street-address">Street Address</label>
<input type="text" class="form-control" id="street-address" name="street-address" placeholder="123 Brick Lane">
</div>
<p>ZIP CODE</p>
<div id="zip-code-group" class="form-group">
<label for="zip-code">Zip Code</label>
<input type="text" class="form-control" id="zip-code" name="zip-code" placeholder="12345">
</div>
<p>COMMENT (OPTIONAL)</p>
<div id="comment-group" class="form-group">
<label for="comment">Comment</label>
<textarea rows "4" cols = "50" type="text" class="form-control" id="comment" name="comment" placeholder="I'm signing because..."></textarea>
</div>
<button type="submit" class="btn btn-success">SUBMIT</button>
</form>
</div>
</body>
</html>
Related
i have issue with my design in contact form i am trying to represent my contact form like following picture: https://cdn.discordapp.com/attachments/772606698283073557/951615088966631505/unknown.png
But my columns display vertically and i want the textarea (Message) to be inline with input Subject, could you help me please? Thank you!
My HTML:
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-md-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</form>
</div>
</div>
</section>
My css:
/***********************************************
For Contact Section
************************************************/
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
You need to encapsulate the columns inside a row
...
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<div class="col-md-12">
...
</div>
</div>
...
You can check the example below, please note that I have removed the md from the columns classes because the preview is less than the medium screen breakpoint
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="row">
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</div>
</form>
</div>
</div>
</section>
I am writing a signup form using Bootstrap 4. I can't get the form fields for user image and biography, to align with the rest of the form fields.
I have tweaked the CSS several ways, but can't get the visual effect I want, which is:
Biography and photo upload fields be same width as all form fields, and align horizontally
Photo field split into two equal width sections (a bit like first and last name fields), with uploaded image horizontally aligned in one field, and the button horizontally aligned in a second field.
Here is my code:
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before,
.signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #999;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
.img-profile {
width: 120px;
height: 120px;
margin-bottom: 15px
}
.avatar .figure img {
float: right;
width: 64px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>Bootstrap Simple Registration Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="signup-form">
<form action="#" method="post">
<h2>Create Account</h2>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
</div>
<div class="form-group avatar">
<div class="row">
<figure class="figure col-md-2 col-sm-3 col-xs-12">
<img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<div class="form-inline col-md-10 col-sm-9 col-xs-12">
<input type="file" class="file-uploader pull-left">
<button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
</div>
</div>
</div>
<div class="form-group">
<label for="user-bio" class="col-lg-2 control-label">Biography</label>
<div class="col-lg-10">
<textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
</div>
</form>
</div>
</body>
</html>
How do I fix the alignment issue in the form?
Step 1 is usually to strip out all the custom margins and padding you've applied. They're usually not necessary with Bootstrap, and they tend to cause problems.
Then wrap the entire thing with a container and set a max-width on it:
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
font-size: 15px;
max-width: 450px;
}
.signup-form h2 {
color: #636363;
position: relative;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>
<div class="container signup-form">
<form action="#" method="post">
<h2>Create Account</h2>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
</div>
<div class="form-group avatar">
<div class="row">
<figure class="figure col col-md-2 col-sm-3">
<img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<div class="form-inline col-md-10 col-sm-9 col-xs-12">
<input type="file" class="file-uploader pull-left">
<button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
</div>
</div>
</div>
<div class="form-group">
<label for="user-bio" class="control-label">Biography</label>
<textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
</div>
</form>
</div>
change the width and remove the float
body {
color: #fff;
background: #63738a;
font-family: 'Roboto', sans-serif;
}
.form-control {
height: 40px;
box-shadow: none;
color: #969fa4;
}
.form-control:focus {
border-color: #5cb85c;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
width: 450px;
margin: 0 auto;
padding: 30px 0;
font-size: 15px;
}
.signup-form h2 {
color: #636363;
margin: 0 0 15px;
position: relative;
text-align: center;
}
.signup-form h2:before,
.signup-form h2:after {
content: "";
height: 2px;
width: 30%;
background: #d4d4d4;
position: absolute;
top: 50%;
z-index: 2;
}
.signup-form h2:before {
left: 0;
}
.signup-form h2:after {
right: 0;
}
.signup-form .hint-text {
color: #999;
margin-bottom: 30px;
text-align: center;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #f2f3f7;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
min-width: 140px;
outline: none !important;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #5cb85c;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
.img-profile {
width: 120px;
height: 120px;
margin-bottom: 15px
}
/* code */
/* for image */
.avatar .figure img {
width: 64px;
}
/* for choose file input */
.pull-left {
float: left;
width: 138px;
margin-left: -26px;
}
/* for biography */
textarea.form-control {
/* height: auto; */
margin-left: -15px;
width: 390px;
}
/* upload button */
.btn:not(:disabled):not(.disabled) {
cursor: pointer;
margin-left: 38px;
padding-left: 22px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
<title>Bootstrap Simple Registration Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="signup-form">
<form action="#" method="post">
<h2>Create Account</h2>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="first_name" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="last_name" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="screenname" placeholder="Username" required="required">
</div>
<div class="form-group avatar">
<div class="row">
<figure class="figure col-md-2 col-sm-3 col-xs-12">
<img class="img-rounded img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="">
</figure>
<div class="form-inline col-md-10 col-sm-9 col-xs-12">
<input type="file" class="file-uploader pull-left">
<button type="submit" class="btn btn-sm btn-default-alt pull-left">Update Image</button>
</div>
</div>
</div>
<div class="form-group">
<label for="user-bio" class="col-lg-2 control-label">Biography</label>
<div class="col-lg-10">
<textarea name="user-bio" id="user-bio" class="form-control" cols="20" rows="3" placeholder="Brief biography"></textarea>
</div>
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block">Create Account Now</button>
</div>
</form>
</div>
</body>
</html>
see the last few lines and run a snippet to view result
I'm new to HTML/CSS and had some questions about my CodeCamp project
How do I move the label and input to the center of the form? I've tried using text-align: center on my row class but it only separates the label and input.
Why are the checkboxes not grouped together? I've tried expanding the bottom margin but it brings the checkboxes on the left column where the labels are supposed to be.
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #ea8a8a;
}
#title {
color: #685454;
text-align: center;
padding: 10px;
}
#description {
color: #685454;
text-align: center;
padding: 10px;
}
#outer-form {
border-radius: 10px;
background-color: #ebd5d5;
padding-bottom: 10px;
}
.row {}
.label {
color: #685454;
display: inline-block;
text-align: right;
float: left;
padding-top: 5px;
width: 190px;
margin-right: 20px;
}
#name {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px;
}
#email {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#number {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#dropdown {
height: 30px;
margin-top: 5px;
margin-bottom: 14px;
display: inline-block;
vertical-align: middle;
horizontal-align: bottom;
margin-left: 20px;
width: 120px
}
input[type=radio] {
margin-left: 20px;
margin-bottom: 30px;
vertical-align: baseline;
margin-top: 20px;
}
input[type=checkbox] {
margin-left: 20px;
vertical-align: baseline;
}
#comments {
margin-top: 10px;
margin-bottom: 5px;
vertical-align: middle;
margin-left: 20px;
width: 150px;
height: 50px;
}
#submit {
background-color: #ea8a8a;
color: white;
border-radius: 5px;
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
vertical-align: middle;
margin-left: 160px;
width: 100px;
height: 40px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">
<h1 id="title">Doge Adoption Form</h1>
<div id="outer-form">
<p id="description">Please fill out the questionare below</p>
<form id="survey-form">
<div class="row">
<label class="label" id="name-label" for="name">Name: </label>
<input id="name" placeholder="Enter your name" required> </input>
</div>
<div class="row">
<label class="label" id="email-label" for="email">Email: </label>
<input id="email" type="email" placeholder="Enter your email" required> </input>
</div>
<div class="row">
<label class="label" id="number-label" for="age">Age: </label>
<input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input>
</div>
<div class="row">
<text class="label">What is your favorite dog: </text>
<select id="dropdown">
<option value="Pomeranian"> Pomeranian</option>
<option value="Beagle"> Beagle</option>
<option value="German Shepard"> German Shepard</option>
</select>
</div>
<div class="row">
<label class="label">How likely are you to pick up doge poop:</label>
<input type="radio" name="odds" value="very likely"> Very Likely
<input type="radio" name="odds" value="not likely"> Not Likely
</div>
<div class="row">
<label class="label"> What tricks will you teach (select all that apply)</label>
<input type="checkbox" name="trick" value="Sit">Sit<br>
<input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
<input type="checkbox" name="trick" value="Roll over">Roll over<br>
<input type="checkbox" name="trick" value="Speak">Speak<br>
</div>
<div class="row">
<label class="label">Any additional information?</label>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
</div>
<div class="row">
<input id="submit" type="submit" value="Submit">
</div>
</form>
</div>
Look at this answer, I have added two styles in your page:
#survey-form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.div50 {
float: left;
width: 50%;
}
#survey-form for make the form alignment into center.
.div50 is to divide div as 50% of the parent div.
{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Nunito', sans-serif;
background-color: #ea8a8a;
}
#title {
color: #685454;
text-align: center;
padding: 10px;
}
#description {
color: #685454;
text-align: center;
padding: 10px;
}
#outer-form {
border-radius: 10px;
background-color: #ebd5d5;
padding-bottom: 10px;
}
.row {}
.label {
color: #685454;
display: inline-block;
text-align: right;
float: left;
padding-top: 5px;
width: 190px;
margin-right: 20px;
}
#name {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px;
}
#email {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#number {
padding: 4px;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 110px
}
#dropdown {
height: 30px;
margin-top: 5px;
margin-bottom: 14px;
display: inline-block;
vertical-align: middle;
horizontal-align: bottom;
margin-left: 20px;
width: 120px
}
input[type=radio] {
margin-left: 30px;
margin-bottom: 15px;
vertical-align: baseline;
margin-top: 10px;
}
input[type=checkbox] {
margin-left: 30px;
vertical-align: baseline;
}
#comments {
margin-top: 10px;
margin-bottom: 5px;
vertical-align: middle;
margin-left: 20px;
width: 150px;
height: 50px;
}
#submit {
background-color: #ea8a8a;
color: white;
border-radius: 5px;
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
display: inline-block;
vertical-align: middle;
margin-left: 160px;
width: 100px;
height: 40px;
}
#survey-form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.div50 {
float: left;
width: 50%;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700">
<h1 id="title">Doge Adoption Form</h1>
<div id="outer-form">
<p id="description">Please fill out the questionare below</p>
<form id="survey-form">
<div class="row">
<label class="label" id="name-label" for="name">Name: </label>
<input id="name" placeholder="Enter your name" required>
</div>
<div class="row">
<label class="label" id="email-label" for="email">Email: </label>
<input id="email" type="email" placeholder="Enter your email" required>
</div>
<div class="row">
<label class="label" id="number-label" for="age">Age: </label>
<input id="number" min="18" max="99" type="number" placeholder="Age:" required>
</div>
<div class="row">
<text class="label">What is your favorite dog: </text>
<select id="dropdown">
<option value="Pomeranian"> Pomeranian</option>
<option value="Beagle"> Beagle</option>
<option value="German Shepard"> German Shepard</option>
</select>
</div>
<div class="row">
<div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div>
<div class="div50">
<input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br>
<input type="radio" name="odds" value="not likely"> <label>Not Likely</label>
</div>
</div>
<div class="row">
<div class="div50">
<label class="label"> What tricks will you teach (select all that apply)</label>
</div>
<div class="div50">
<input type="checkbox" name="trick" value="Sit">Sit<br>
<input type="checkbox" name="trick" value="Army crawl">Army crawl<br>
<input type="checkbox" name="trick" value="Roll over">Roll over<br>
<input type="checkbox" name="trick" value="Speak">Speak<br>
</div>
</div>
<div class="row">
<label class="label">Any additional information?</label>
<textarea id="comments" placeholder="Enter your comment here..."></textarea>
</div>
<div class="row">
<input id="submit" type="submit" value="Submit">
</div>
</form>
</div>
here is the code for u first of all a neat and clear alignment of a form you should write the code using bootstarp.
put this links also for working the code dear.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Signingroup Financial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" type="text/css">
<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<div class="row">
<div class="sg_formslist">
<div class="col-sm-12 col-md-12">
<div id="Selection-1-container" >
<form class="form-horizontal" id="form1">
<div class="col-sm-12 ">
<div class="col-sm-2">
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Surname<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="text" class="form-control" name="customer_name" Placeholder="Customer Name" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Mobile Number 1<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Mobile Number 2<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284 ">
</div>
</div>
</div>
<div class="form-group ">
<div class="col-sm-12">
<label class="control-label col-sm-6">Gender<span class="impstar">*</span></label>
<div class="col-sm-6">
<div class="radio" required>
<label >
<input type="radio" name="Selection" id="Selection-1" value="female" checked>
Female
</label>
<label >
<input type="radio" name="Selection" id="Selection-1" value="male" >
Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Description <span class="impstar">*</span></label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="description" placeholder="Description For Discount"></textarea>
</div>
</div>
</div>
<div class="form-group text-right">
<i class="fa fa-paper-plane plnay" ></i>
<input type="submit" class="btn btn-info" value="Submit ">
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
let you try this code its working.
I want to design the responsive contact form where the layout is name, email, subject fields be in one column and message field be in the another column. I could not make that message field appear in another column though I have used the width as 50%. Here is the demo
http://jsbin.com/vuxojuqeve/edit?html,css,output
The code
#responsive-form {
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.form-row {
width: 100%;
}
.form-row input {
margin: 10px 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.button {
float: left;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box
}
.half-size {
width: 50%;
}
<div id="responsive-form" class="clearfix">
<div class="half-size">
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
</div>
<div class="half-size">
<div class="form-row">
<div class="column">
<textarea class="form-control" cols="40" rows="10"></textarea>
</div>
</div>
</div>
<div class="form-row">
<div class="column">
<input type="submit" name="name" class="button">
</div>
</div>
</div>
</div>
This is what I wanted with submit button on the left column
You need to set your containers to display:inline-block, as they are block level elements by default and won't allow others to be positioned beside them.
I'm using 45% because 50% + 50% is not usually 100% when using inline-blocks because of an issue with whitespace, there are some ways around it, I'll let you decide for yourself which hack to use...
#responsive-form {
max-width: 600px;
margin: 0 auto;
width: 100%;
}
.form-row {
width: 100%;
}
.form-row input {
margin: 10px 0;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.button {
float: left;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box
}
.half-size {
width: 45%;
display:inline-block;
}
<div id="responsive-form" class="clearfix">
<div class="half-size">
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
<div class="form-row">
<div class="column">
<input type="text" name="name" class="form-control">
</div>
</div>
</div>
<div class="half-size">
<div class="form-row">
<div class="column">
<textarea class="form-control" cols="40" rows="10"></textarea>
</div>
</div>
</div>
<div class="form-row">
<div class="column">
<input type="submit" name="name" class="button">
</div>
</div>
</div>
</div>
If there are columns, use flexbox.
Inputs and textarea width unit is vw and e.g. min-width: 180px.
Example
body {
margin: 0;
}
::placeholder,
input[type="submit"] {
color: #BACEE7;
font-weight: bold;
}
.form {
display: flex;
justify-content: center;
padding: 15px;
}
.form input,
.form textarea {
min-width: 180px;
background: #F2F2F2;
border: 1px solid #ccc;
text-transform: uppercase;
border-radius: 3px;
text-align: center;
box-sizing: border-box;
}
.form>.inputs {
margin-right: 5px;
}
.form>.inputs>input {
width: 30vw;
display: block;
margin-bottom: 5px;
padding: 1.5vw;
}
.form>.inputs>input:last-child {
margin-bottom: 0 !important;
}
.form textarea {
width: 35vw;
padding-top: 80px;
display: block;
height: 100%;
}
.form input[type="submit"] {
background: #CA0002;
color: white;
border: none;
cursor: pointer;
}
<div class="form">
<div class="inputs">
<input type="text" name="first_name" placeholder="first name">
<input type="text" name="last_name" placeholder="last name">
<input type="email" name="email" placeholder="email">
<input type="text" name="organization" placeholder="organization">
<input type="tel" name="phone" placeholder="phone">
<input type="submit" name="submit">
</div>
<div class="textarea">
<textarea name="" id="" cols="30" placeholder="message"></textarea>
</div>
</div>
Problem is that the footer's text is left aligned on this page but not on any others using identical code. I went step by step commenting out each section and it is the map img that is causing this issue. I can solve this by setting the footer to clear right but that seems to completely mess up the height of the footer. I have included a couple of screen prints to help demonstrate what I mean.
#container {
background-image: url(..//Images/backgroundPic.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 1000px;
border-style: ridge;
border-width: 5px;
}
h1,
h2 {
text-decoration: underline;
}
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
background-color: #F1EBEB;
}
/* Header */
#top {
padding: 0px;
margin: 0px;
background-color: white;
background-image: url(../images/tutorteam.png);
height: 50px;
width: 1000px;
font-size: 1em;
}
#top img {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
#details {
display: table;
padding: 10px;
}
#details p {
display: table-cell;
vertical-align: top;
padding: 3px;
}
div.tablerow {
display: table-row
}
div.tablerow p:first-child {
text-align: right;
}
#logo {
float: right;
margin-left: 4px;
margin-top: 2px;
}
#back {
float: left;
margin-left: 40px;
margin-top: 2px;
}
#main {
padding: 10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: white;
}
#tableContainer {
display: table;
margin-left: auto;
margin-right: auto;
border-spacing: 10px;
font-size: 0.25em;
}
#footer {
display: table-row;
}
#tableCell {
display: table-cell;
vertical-align: top;
}
#dubaiMap {
float: right;
position: relative;
right: 20px;
top: -200px;
}
#signUp {
margin-left: 110px;
margin-bottom: 100px;
border: 0px;
padding: 0px;
height: 90px;
}
#submit {
float: right;
position: relative;
bottom: 60px;
left: 420px;
margin-left: 20px;
background-color: #4CAF50;
/* Green */
border: 2px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
textarea {
float: right;
position: relative;
bottom: 250px;
right: 175px;
border: 3px solid #4CAF50;
font-size: 14px
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
<link type="text/css" rel="stylesheet" href="login.css">
</head>
<body>
<div id="container">
<section id="top">
<a href="../index.html">
<img id="back" src="../images/back.png" height="40px">
</a>
<img id="logo" src="../images/tutorTeamLogo.png" height="40px">
</section>
<section id="main">
<p>Are you a tutor or customer? please select the relevant option.</p>
<form>
<select name="user">
<option value="Customer">Customer</option>
<option value="Tutor">Tutor</option>
</select>
</form>
<form action="tutorSignUp.php" method="POST">
<p>Please complete to sign up.</p>
<section id="details">
<div class="tablerow">
<p>First name:</p>
<p>
<input type="text" name="firstName" value="">
</p>
</div>
<div class="tablerow">
<p>Last name:</p>
<p>
<input type="text" name="lastName" value="">
</p>
</div>
<div class="tablerow">
<p>Address:</p>
<p>
<input type="text" name="address" value="">
</p>
</div>
<div class="tablerow">
<p>city:</p>
<p>
<input type="text" name="city" value="">
</p>
</div>
<div class="tablerow">
<p>Zip:</p>
<p>
<input type="text" name="zip" value="">
</p>
</div>
<div class="tablerow">
<p>Telephone:</p>
<p>
<input type="tel" name="telephone" value="">
</p>
</div>
</section>
<img src="../Images/dubaiZones.png" id="dubaiMap">
<p>Tutoring level</p>
<select name="level">
<option value="Pre School">Pre School</option>
<option value="Primary School">Primary</option>
<option value="GCSE">GCSE</option>
<option value="A level">A Level</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Post Graduate">Post Graduate</option>
</select>
<p>Subject specialism(s)</p>
<input type="checkbox" name="subject" value="English">English
<br>
<input type="checkbox" name="subject" value="Maths">Maths
<br>
<input type="checkbox" name="subject" value="Physics">Physics
<br>
<input type="checkbox" name="subject" value="Chemistry">Chemistry
<br>
<input type="checkbox" name="subject" value="Biology">Biology
<br>
<input type="checkbox" name="subject" value="History">History
<br>
<input type="checkbox" name="subject" value="Geography">Geography
<br>
<input type="checkbox" name="subject" value="Religious Studies">R.E.
<br>
<input type="checkbox" name="subject" value="French">French
<br>
<input type="checkbox" name="subject" value="German">German
<br>
<input type="checkbox" name="subject" value="Spanish">Spanish
<br>
<input type="checkbox" name="subject" value="Computing">Computing
<br>
<input type="checkbox" name="subject" value="Business">Business
<br>
<input type="checkbox" name="subject" value="Economics">Economics
<br>
<input type="checkbox" name="subject" value="Classics">Classics
<br>
<br>
<textarea id="textArea" name="comments" rows="10" cols="48">Additional Information...</textarea>
<input type="submit" value="Sign Up" id="submit">
</form>
</section>
<footer>
<table id="tableContainer">
<tr id="footer">
<td id="tableCell">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</td>
</tr>
</table>
</footer>
</div>
</body>
</html>
I don't undestand the need of using a table to display a single line of text.
You juste need to use a paragraph with text-align: center;
.text-center {
text-align: center;
}
<footer id="footer">
<p class="text-center">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</p>
</footer>
Plus I think your issue is du to the use of the table. I believe by default table cell align text on the left, and I didn't see any CSS rule to change that in your code.