I'm making a basic citation generator mockup with two columns: one for the list of already-generated citations, and one with a form to create a new one. Each element is in a div. Because the form is shorter in height than the citation list, I'm putting an example image underneath that could be replaced with an advertisment.
However, despite placing the first column (citation list) and second (form and ad) in different divs, the ad stays underneath the citation list:
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
#citationList {
display: inline-block;
float: left;
margin-left: 15%;
width: 30%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
margin-right: 15%;
width: 30%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm form label {
float: left;
}
#creationForm form input .textBox {
float: right;
}
#adSpace {
float: right;
}
<html>
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="col-sm">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
<li>Citations are listed here</li>
<li>This can be however long</li>
</ul>
</div>
</div>
<div class="col-sm">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<label for="someInput">Some input:</label>
<input id="someInput" type="text" class="textBox" />
<label for="moreInput">More input:</label>
<input id="moreInput" type="text" class="textBox" />
<label for="evenMoreInput">Even more input:</label>
<input id="evenMoreInput" type="text" class="textBox" />
<label for="muchMoreInput">Much more input:</label>
<input id="muchMoreInput" type="text" class="textBox" />
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</body>
</html>
use clear:both; as shown below
#adSpace {
float: right;
clear: both;
}
Here is the corrected CSS and HTML.
#container {
text-align: center;
}
#header {
margin-bottom: 3em;
margin-top: 2em;
}
#header h3 {
color: darkgrey;
font-size: 1em;
}
.contentContainer {
width:1200px;
margin:0 auto;
display: inline-block;
}
#citationList {
display: inline-block;
float: left;
width: 100%;
}
#citationList #citations {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
#creationForm {
display: inline-block;
float: right;
width: 100%
}
#creationForm form {
border: 1px solid darkgrey;
padding: 20px;
border-radius: 15px;
margin-top: 1.5em;
}
.row {
margin:10px -15px;
}
#creationForm form label {
float: left;
width: 30%;
}
#creationForm form input.textBox {
float: left;
}
#adSpace {
float: left;
}
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div id="container">
<div id="header">
<h1>Citation Generator</h1>
<h3>it's totally amazing</h3>
</div>
<div class="contentContainer">
<div class="col-md-6 col-sm-6">
<div id="citationList">
<h4>Your Citations</h4>
<ul id="citations">
Looks like you don't have any citations made yet!
</ul>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div id="creationForm">
<h4>Create a Citation</h4>
<form>
<!-- Author -->
<div class="row">
<label for="authorFirst">Author's first name:</label>
<input id="authorFirst" type="text" class="textBox" />
</div>
<div class="row">
<label for="authorLast">Author's last name:</label>
<input id="authorLast" type="text" class="textBox" />
</div>
<br />
<!-- Website -->
<div class="row">
<label for="pageTitle">Title of page/article:</label>
<input id="pageTitle" type="text" class="textBox" />
</div>
<div class="row">
<label for="siteTitle">Title of website:</label>
<input id="siteTitle" type="text" class="textBox" />
</div>
<br />
<!-- Dates -->
<div class="row">
<label for="datePublished">Date published:</label>
<input id="datePublished" type="text" class="textBox" />
</div>
<div class="row">
<label for="dateAccessed">Date accessed:</label>
<input id="dateAccessed" type="text" class="textBox" />
</div>
</form>
</div>
<div id="adSpace">
<img src="https://via.placeholder.com/300x300.jpg?text=Placeholder+Advertisment" />
<p>Advertisment</p>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I've been trying to a series of input boxes to be inline but also to be responsive such that it does not get overlapped on the row below.
When shrinking the contents gets overlayed on top of div directly below and not sure how to fix this
/** Editable **/
.container {
display: block;
margin: auto;
}
/** Not editable onwards **/
.multiple-choice--small {
height: 24px;
padding: 2px 10px 0 36px;
}
.full {
float: left;
width: 100%;
}
.quarter,
.one-quarter {
float: left;
width: 25%;
}
.third,
.one-third {
float: left;
width: 33.33333%;
}
.form-group {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
margin-bottom: 15px;
}
input[type=number] {
-moz-appearance: textfield;
}
.form-date .form-group {
float: left;
width: 50px;
margin-right: 20px;
margin-bottom: 0;
clear: none;
}
.form-date .form-group label {
display: block;
padding-bottom: 2px;
}
.form-date .form-group input {
max-width: 100%;
}
.form-date .form-group-year {
width: 70px;
}
.form-group-error {
margin-right: 15px;
border-left: 4px solid #b10e1e;
padding-left: 10px;
}
#media (min-width: 641px) {
.form-group-error {
border-left: 5px solid #b10e1e;
padding-left: 15px;
}
}
.form-control-error {
border: 4px solid #b10e1e;
}
.error-message {
font-family: "nta", Arial, sans-serif;
font-weight: 700;
text-transform: none;
font-size: 16px;
line-height: 1.25;
color: #b10e1e;
display: block;
clear: both;
margin: 0;
padding: 2px 0;
}
<div class="container">
<div class="full" style="padding-top:10px;">
<div class="one-quarter"><span style="font-weight:bold"> t </span></div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<label> Input A </label>
<div class="form-group">
<div class="form-date" >
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control">
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control" >
</div>
</div>
</div>
</span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px">
<div> Input B </div>
<div class="form-group" >
<div class="form-date" style="background: blue;">
<div class="form-group day" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group month" style="margin:0px">
<input style="width:40px" class="form-control" >
</div>
<div class="form-group year" style="margin:0px">
<input style="width:50px" class="form-control">
</div>
</div>
</div>
</span>
</div>
</div>
<div class="full">
<div class="one-quarter"> </div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio A</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
<div class="one-third">
<span class="multiple-choice--small" style="display: inline-flex; padding: 0;">
<input type="radio" style="min-width:24px; min-height:24px" checked>
<div> Radio B</div>
</span>
<span class="error-message" style="display:none;"></span>
</div>
</div>
</div>
Full screen:
Responsive:
Edit: Added JSFiddle: https://jsfiddle.net/Ducking/0n8cdvtx/13/
Use the flex property on the dates class.
I'm making a webpage for my mums baking business (and to practice my novice coding skills, otherwise I'd just use a simpler solution rather than learning bootstrap).
I've got a header, then 3 bootstrap columns below it, one with an order form, one with images of her bakes, then one with links. I've sized them 3-6-3. I like the way the page looks fullscreen on my desktop but I want the columns to stack when browser gets smaller, or on another device. Currently they just smoosh together, the images get smaller, and after a certain point, a horizontal scrollbar appears. No stacking.
I'm sure I'm either trying to use bootstrap completely wrong, or there's a few glaring errors. I've been staring at it, and trying 'fixes' on here for so long, but I can't solve my issue. Some advice would be greatly appreciated.
one problem I know, is that the and aren't all formatted correctly, I can solve this myself with a bit of time, I just styled it whilst I had it wrongly formatted and when I do it correctly it all looks ugly again, so I'm leaving it for another day. My main problem is the stacking issue.
body {
background-image: url(../images/background.jpg);
}
* {
list-style: none;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
header {
margin: 10px 10px 10px 0px;
width: 100%;
height: 100px;
display: block;
background-color: #539e8a;
}
#inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
}
header h1 {
font-family: 'Redressed', cursive;
font-size: 333%;
color: #f6c5be;
top: 15px;
left: 43%;
position: absolute;
}
#logo {
float: left;
padding: 17px 0px 0px 0px;
}
#myname {
float: right;
color: #f6c5be;
margin: 40px 0px 0px 0px;
font-size: 130%;
font-weight: 200;
}
/* ----------------------------------------------- */
.row {
display: table;
margin: 0px 5px 0px 5px;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.row div {
background: #f6c5be;
/*border: 2px solid #539e8a;*/
}
.pics img {
width: auto;
height: auto;
margin: 20px 0px 20px 0px;
display: block;
}
.main2 {
width: 100%;
}
#media-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
#links-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
a:link {
color: #539e8a;
}
a:visited {
color: darkolivegreen;
}
a:hover {
color: #539e8a;
}
#orderform-text {
float: none;
margin: 0 auto;
color: #539e8a;
}
input[type=text] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=date] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=tel] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
select[name=orderItems] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
textarea[name=orderBrief] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
input[type=checkbox] {
border: 0;
margin-top: 15px;
}
input[type=submit] {
border: 0;
box-shadow: 0 0 5px 4px #539e8a;
float: right;
}
<head>
<link href="https://fonts.googleapis.com/css2?
family=Open+Sans:wght#300&family=Redressed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/mysite.css">
</head>
<body>
<header>
<div id="inner_header">
<img id="logo" src="images/newlogo.png" alt="logo, a cupcake">
<h1>redacted</h1>
<div id="myname">
<p>
by redacted
</p>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div id="col1" class="col-xs-3">
<div class="row" id="orderform-text">
<div class="col-xs-12">
<h2><b>Order Form</b></h2>
</div>
</div>
<form action="xxx.xxx.xxx" method="post">
<div class="tableRow">
<p></p>
</div>
<div class="tableRow">
<p>
<label for="name">Name:</label>
<input type="text" name="name">
</p>
</div>
<div class="tableRow">
<p>
<label for="address">Address:</label>
<input type="text" name="Address">
</p>
</div>
<div class="tableRow">
<p>
<label for="contactNumber">Contact Number:</label>
<input type="tel" name="contactNumber">
</p>
</div>
<div class="tableRow">
<p>
<label for="deliveryDate">Delivery Date:</label>
<input type="date">
</p>
</div>
<div class="tableRow">
<p>
<label for="orderItems">What would you like?:</label>
<select name="orderItems">
<option value="Cake">Cake</option>
<option value="Cupcakes">Cupcakes</option>
<option value="Brownies">Brownies</option>
<option value="Scones">Scones</option>
<option value="Wedding Cake">Wedding Cake</option>
<option value="Custom Order">Custom Order (detail below)</option>
</select>
</p>
</div>
<div class="tableRow">
<p>
<label for="orderBrief">Order brief:
<br>
<br>
<textarea name="orderBrief" rows="5" cols="50" placeholder="Tell me in detail what you would like to order!"></textarea></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="DietaryRequirements">Dietary requirements?:
Vegan<input type="checkbox" name="dietaryRequirements" value="Vegan">
Dairy-Free<input type="checkbox" name="dietaryRequirements" value="Dairy-free (can eat egg)">
Gluten-Free<input type="checkbox" name="dietaryRequirements" value="Gluten-free"></label>
</p>
</div>
<div class="tableRow">
<p>
<label for="giftwrap">Giftwrap?
yes <input type="radio" name="giftwrap" value="yes">
no <input type="radio" name="giftwrap" value="no"></label>
</p>
</div>
<div class="tableRow">
<p>
<input type="submit" value="Place Order">
</p>
<br>
</div>
<br>
</form>
</div>
<div id="col2" class="col-xs-6">
<div class="row" id="media-text">
<div class="col-xs-12">
<h2><b>Media</b></h2>
</div>
</div>
<div class="row">
<div class="col-xs-4 pics">
<img src="images/cake1.jpg" id="picture1" class="img-responsive" alt="wedding cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake2.jpg" id="picture2" class="img-responsive" alt="birthday cake">
</div>
<div class="col-xs-4 pics">
<img src="images/cake3.jpg" id="picture3" class="img-responsive" alt="cupcakes">
</div>
</div>
</div>
<div id="Links" class="col-xs-3">
<div class="row" id="links-text">
<div class="col-xs-12">
<h2><b>Links</b></h2>
<a href="link removed">
<h3>Facebook</h3>
</a>
<a href="link removed">
<h3>5 star hygiene rating</h3>
</a>
<a href="">
<h3>Reviews!</h3>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
Hey, so I'm trying to build a movie review site which uses a database (I'm using PouchDB) and I want to style my admin/add a review page so that the inputs and labels are all aligned in a certain way. I keep adjusting widths, padding and margins but I just cant seem to get them to align. Can someone teach me how to align them the way i want them to be please?
This is how I want them to look:
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
text-align: center;
background: red;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
input {
margin: 10px;
width: 40%;
background-color: yellow;
padding: 8px;
border: 2px;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<label for="title">Title:</label><input type="text" id="title">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="image">Image:</label><input type="text" id="image">
<label for="rating">Rating:</label><input type="number" id="rating">
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
you can use either flex or grid or both. I've used both just as an example. you could also use only grid and nest a grid within a grid.
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
background-color: green;
max-width: 100%;
padding: 10%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px;
}
#formTitle {
grid-column: 1/3;
}
#modifyFilmButton {
grid-column: 2/3;
width: 50%;
justify-self: end;
}
.left {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.right {
display: flex;
flex-direction: column;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>temp</title>
<link rel="stylesheet" type="text/css" href="temp.css" />
</head>
<body>
<div class="newFilm">
<h2 id="formTitle">Create new review</h2>
<div class="left">
<label for="title">Title:</label><input type="text" id="title" />
<label for="image">Image:</label><input type="text" id="image" />
<label for="trailer">Trailer:</label><input type="text" id="trailer" /> <input type="hidden" id="id" />
<label for="rating">Rating:</label><input type="number" id="rating" />
</div>
<div class="right">
<label for="genre">Genre:</label><input type="text" id="genre" />
<label for="synopsis">Synopsis:</label><input type="text" id="synopsis" />
</div>
<button id="modifyFilmButton">Post review!</button>
</div>
<script src="temp.js"></script>
</body>
</html>
Modified your html a little to add some structure.
I would not recommend using this code, look into bootstrap tables, or something of that nature. It will look better, and be a more scaleable solution.
.newFilm {
background-color: red;
padding: 20px;
border-radius: 20px;
}
textarea,
input,
label {
display: block
}
textarea,
input {
width: 200px;
}
.form {
width: 100%;
}
.left,
.right {
width: 49%;
display: inline-block;
vertical-align: top;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="left">
<label for="title">Title:</label>
<input type="text" id="title">
<label for="genre">Genre:</label>
<input type="text" id="genre">
<label for="image">Image:</label>
<input type="text" id="image">
<label for="rating">Rating:</label>
<input type="number" id="rating">
</div>
<div class="right">
<label for="synopsis">Synopsis:</label>
<input type="text" id="synopsis">
<label for="trailer">Trailer:</label>
<textarea id="trailer" rows="5"></textarea>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</div>
</form>
</div>
</div>
Responsive solution:
.myForm {
background-color: red;
padding: 20px;
border-radius: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid myForm">
<div class="row">
<div class="col-lg"><h1>Create New Review</h1></div>
</div>
<form>
<div class="row">
<div class="col-md"> <!-- left column -->
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Genre</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Image</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Rating</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md"> <!-- right column -->
<div class="form-group">
<label>Synopsis</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Trailer</label>
<textarea class="form-control"></textarea>
</div>
<input class="btn btn-primary" type="submit" value="Submit" disabled>
</div>
</div>
</form>
</div>
Adjust the left/right columns to have your desired effect.
See: https://getbootstrap.com/docs/4.1/layout/grid/
Well there are couple ways to do that.
My best option would be to have one big div that would hold two smaller divs.
Then give those two divs width of 50% each - i have used grid for that.
After that you want to make sure that label and input are taking full width of their container.
Like that you will achieve most of what you want. Also for Synopsis you should use textarea not input.
Here is my example on codepen.
Here is what I did
body {
margin: 0;
font-family: georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: green;
width: 80%;
padding: 20px;
}
label {
padding: 6px;
color: #fff;
display: block;
text-align: left;
}
.form {
display: flex;
text-align: center;
flex-direction: column;
}
.row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea {
width: 100%;
display: block;
background-color: yellow;
padding: 8px;
border: 2px;
}
#modifyFilmButton {
float: right;
}
<div class="newFilm">
<h2 id='formTitle'>Create new review</h2>
<div class="form">
<form>
<div class="row">
<div class="col">
<label for="title">Title:</label><input type="text" id="title">
<label for="image">Image:</label><input type="text" id="image">
<label for="trailer">Trailer:</label><input type="text" id="trailer">
<label for="rating">Rating:</label><input type="number" id="rating">
</div>
<div class="col">
<label for="genre">Genre:</label><input type="text" id="genre">
<label for="synopsis">Synopsis:</label>
<textarea rows="9" id="synopsis"></textarea>
</div>
</div>
<input type="hidden" id="id">
<button id="modifyFilmButton">Post review!</button>
</form>
</div>
</div>
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>