Can someone explain why the element below the floated element gets displaced as if it had a padding of a width of the floated element?
HTML and CSS:
div.filter { border: 1px solid #aaaaaa; padding: 0 10px 10px 10px; width: 300px;}
div.filterTitle { float:left; padding: 5px; margin:-12px 0 0 10px; background:#fff; }
div.filter label { display:inline-block; width: 120px; font-weight: bold; margin-top: 15px;}
div.filter input[type="text"] { width: 146px; }
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value="">
</div>
</form>
</div>
FIDDLE: jsFiddle
It's not clear exactly what you are asking but based on comments I think this is just a case of clearing the float.
/* filters menu */
div.filter {
border: 1px solid #aaaaaa;
padding: 0 10px 10px 10px;
width: 300px;
}
div.filterTitle {
float:left;
padding: 5px;
margin:-12px 0 0 10px;
background:#fff;
}
form {
clear: both;
}
div.filter label {
display:inline-block;
width: 120px;
font-weight: bold;
margin-top: 15px;
}
div.filter input[type="text"] {
width: 146px;
}
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value=""/>
</div>
</form>
</div>
You might also want to look into the fieldset and legend elements which would seem to be more inline with the look you seem to be aiming for.
Fieldset # MDN
Quick JSfiddle Demo
Related
I want to make a two column layout form. but I am getting a problem i.e input elements of form are not equally divided in size(width) and also responsive.
I want it to be responsive and also equally width with gap between them.
Attached Code Below
#import url('https://fonts.googleapis.com/css?family=Montserrat');
h2 {
font-family: Montserrat;
font-size: 3em;
line-height:50px;;
}
form {
width:70%;
margin: 10% auto;
}
input[type="text"]{
display: block;
height: 30px;
width: 47%;
float:left;
}
form > input:nth-child(3){
margin-left: 31px;
margin-right:0;
}
textarea {
width:100%;
box-sizing: border-box;
margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
}
textarea[placeholder="Message"]{
letter-spacing:5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,textarea:focus {
outline:none;
}
<section id="contact-page">
<form>
<h2>Contact Us</h2>
<input type="text" placeholder="Name">
<input type="text" placeholder="E-mail">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>
Try This
<form>
<div class="col-sm-6 col-xs-12 form-group">
<input type="text" name="" class="form-control">
</div>
<div class="col-sm-6 col-xs-12 form-group">
<input type="email" name="" class="form-control">
</div>
<div class="col-sm-12 form-group">
<textarea name="" cols="" rows="10" class="form-control"></textarea>
</div>
<form>
Just add this to your form section and also add the required files for botstrap
1- Jquery
2- Bootsrap.min.css
Bootsrap Documentation
JS fiddle
Remove float for inputs and add a wrapper div as below
h2 {
font-family: Montserrat;
font-size: 3em;
line-height:50px;;
}
form {
width:70%;
margin: 10% auto;
}
#email{
display: block;
height: 30px;
width: 30%;
float:left;
margin:0;
margin-left:2%;
}
#name{
display: block;
height: 30px;
width: 30%;
}
form > input:nth-child(3){
margin-left: 31px;
margin-right:0;
}
textarea {
width:100%;
box-sizing: border-box;
margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
}
textarea[placeholder="Message"]{
letter-spacing:5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,textarea:focus {
outline:none;
}
<section>
<form>
<h2>Contact Us</h2>
<div style="display: flex; justify-content: space-between;">
<input type="text" placeholder="Name">
<input type="text" placeholder="E-mail">
</div>
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>
If possible use Bootstrap with Grids, if not easy solution will be add div like this:
Bootstrap Grid LinK: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<form>
<h2>Contact Us</h2>
<div>
<input type="text" placeholder="Name">
</div>
<div>
<input type="text" placeholder="E-mail">
</div>
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
Your selector form > input:nth-child(3) is a problem because it counts the h2 as the first, making the email-input the third and adding left-margin to it.
Once that is gone, I added margin: 30px 0; to the existing input['text'] selector, to match what you had applied to the textarea, and you may want different values, but everything is lined up and evenly spaced:
JS Fiddle
Example :
h2 {
font-family: Montserrat;
font-size: 3em;
line-height:50px;;
}
form {
width:70%;
margin: 10% auto;
}
#email{
display: block;
height: 30px;
width: 30%;
float:left;
margin:0;
margin-left:2%;
}
#name{
display: block;
height: 30px;
width: 30%;
float:left;
}
form > input:nth-child(3){
margin-left: 31px;
margin-right:0;
}
textarea {
width:100%;
box-sizing: border-box;
margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
}
textarea[placeholder="Message"]{
letter-spacing:5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,textarea:focus {
outline:none;
}
<section id="contact-page">
<form>
<h2>Contact Us</h2>
<input type="text" placeholder="Name" id='name'>
<input type="text" placeholder="E-mail" id='email'>
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>
Well ! i tried to figure out your problem and just gave a try to make it responsive.
Max-width and Max-height
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
Using max-width instead, in this situation, will improve the browser's handling of small windows. similarly for height
You can remove margin: 0 auto; if you want don't want your content centred
#import url('https://fonts.googleapis.com/css?family=Montserrat');
h2 {
white-space: auto;
font-family: Montserrat;
font-size: 3em;
line-height: 50px;
;
}
form {
width: 70%;
margin: 0 auto;
}
input[type="text"] {
max-height: 30px;
max-width: 47%;
}
textarea {
max-width: 100%;
box-sizing: border-box;
margin: 10px 0;
}
input[placeholder="Name"],
input[placeholder="E-mail"] {
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
margin-bottom: 10px;
}
textarea[placeholder="Message"] {
letter-spacing: 5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,
textarea:focus {
outline: none;
}
<section id="contact-page">
<form>
<h2>Contact Us</h2>
<input type="text" placeholder="Name">
<input type="text" placeholder="E-mail">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>
I would like to display three elements on a single line: one justified to the left; the second in the centre and containing sub-elements; and the third justified to the right and containing a DuckDuckGo search box and a magnifying glass image. At the moment I have got them all on the same line but they aren't justifying properly. My code is as follows:
#row2 { padding: 5px 0 5px 10px;
margin: 35px 0 20px 0;
font-size: 83%;
width: 100%;
border-top: 2px #f00 solid;
border-bottom: 1px #888 solid; }
#row2 a {border: none; }
#row2-col1 {display:inline;
text-align:left;
margin-right: 40px;}
#row2-col2 {display:inline;
text-align:center; }
.row2-col2-inner {display:inline;
text-align:center;
margin: 0 15px; }
#row2-col3 {display:inline;
text-align:right; }
form {
display: inline-block;
vertical-align: middle; }
form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 25px;
margin-top: 2px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top; }
<div id="row2">
<div id="row2-col1">
text</div><!--close r2-c1-->
<div id="row2-col2">
<div class="row2-col2-inner">One</div>
<div class="row2-col2-inner">Two</div>
<div class="row2-col2-inner">Three</div>
<div class="row2-col2-inner">Four</div>
</div><!--close r2-c2-->
<div id="row2-col3">
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com"/>
<input type="hidden" name="k8" value="#000000"/>
<input type="hidden" name="k9" value="#0000ff"/>
<input type="hidden" name="kaa" value="#880088"/>
<input type="hidden" name="kt" value="a"/>
<input type="text" name="q" maxlength="255" placeholder=" ..."/>
<img src="images/image.gif" height="20" width="20">
</form>
</div><!--close r2-c3-->
</div><!--close row2-->
There are a hundred different ways to accomplish what you're trying to do:
Floats (Easy)
Flexbox (Advanced)
Display (which you are attempting by the looks of it)
Absolute positioning (Weird, but applicable in some situations)
... and so on ...
Based on your example code I would keep it simple and use floats. Also, IMO, you should stay away from using ids - use classes instead.
In the below example I will assume you want 25%-50%-25%. The simple structure being:
<div class="row">
<div class="column left">Left side</div>
<div class="column center">Center column</div>
<div class="column right">Right</div>
</div>
CSS:
/* overflow and zoom are just to clear the row */
http://learnlayout.com/clearfix.html
.row {
overflow: auto;
zoom: 1;
}
.row .column {
float: left;
}
/* set the width of each column */
.column.left, .column.right {
width: 25%;
}
.column.center {
width: 50%;
}
Note:
This would not account for padding. If you want spacing between the columns then have the inner contents handle that with padding or margins.
This is a specific example to your situation
Nowadays it is quite common to use frameworks for grids. They give you a lot more options and are tried and tested techniques that handle a lot of the edge cases. Search css grid and that will get you started.
If flexbox is an option, you can make row2 a flexbox and use justify-content: space-between to align as required - see demo below:
#row2 {
padding: 5px 0 5px 10px;
margin: 35px 0 20px 0;
font-size: 83%;
width: 100%;
border-top: 2px #f00 solid;
border-bottom: 1px #888 solid;
/*ADDED THESE*/
display: flex;
justify-content: space-between;
}
#row2 a {
border: none;
}
#row2-col1 {
display: inline;
text-align: left;
margin-right: 40px;
}
#row2-col2 {
display: inline;
text-align: center;
}
.row2-col2-inner {
display: inline;
text-align: center;
margin: 0 15px;
}
#row2-col3 {
display: inline;
text-align: right;
}
form {
display: inline-block;
vertical-align: middle;
}
form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 25px;
margin-top: 2px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top;
}
<div id="row2">
<div id="row2-col1">
text</div>
<!--close r2-c1-->
<div id="row2-col2">
<div class="row2-col2-inner">One
</div>
<div class="row2-col2-inner">Two
</div>
<div class="row2-col2-inner">Three
</div>
<div class="row2-col2-inner">Four
</div>
</div>
<!--close r2-c2-->
<div id="row2-col3">
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com" />
<input type="hidden" name="k8" value="#000000" />
<input type="hidden" name="k9" value="#0000ff" />
<input type="hidden" name="kaa" value="#880088" />
<input type="hidden" name="kt" value="a" />
<input type="text" name="q" maxlength="255" placeholder=" ..." />
<img src="images/image.gif" height="20" width="20">
</form>
</div>
<!--close r2-c3-->
</div>
<!--close row2-->
Hello I am having issues centering a form for a login page. I am not to good with CSS and it has been a while since I have played with HTML. What I want to do is, center the input boxes and align the text left on top of the input fields, as well as have an image centered as well, like in the picture. I have tried adding different div id and tags to the form but I can not seem to figure out the css part. I appreciate any help and sorry if the CSS is sloppy.
body {
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
color: black;
}
p {
color: black;
}
html {
text-alight: center;
}
#login {
text-align:center;
}
input[type=text], input[type=date], input[type=password] {
width: 30%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 30%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users {
width: 30%;
height: 50px;
}
#media only screen and (max-device-width: 1024px){
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
#service_type, #series, #speaker, #users{
width: 100%;
height: 50px;
}
#keypad_users{
width: 345px;
height: 50px;
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:30px;
font-weight:bold;
}
#keypad {margin:auto; margin-top:10px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:100px;
height:80px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC;
}
#keypad tr td:hover {
background-color:#999999;
color:#FFFF00;
}
#display {
text-align:center;
width:345px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:48px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:18px;
font-weight:bold;
display:none;
}
}
<div id="login">
<form action = "login.php" id="login" method ="POST">
Username <br />
<input type="text" name="username" id="username" required /><br /><br />
Password <br />
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
I've made a JSfiddle for you here (click me please) that resembles the picture you've added.
As requested to not use a third party like I've added the code here:
HTML
<div id="login">
<form action = "login.php" id="login" method ="POST">
<div class="picture">
</div>
<p>Username</p>
<input type="text" name="username" id="username" required /><br /><br />
<p>Password</p>
<input type ="password" name="password" id="password" required /><br /><br />
<input type="submit" name="submit" value="Log in">
</form>
</div>
CSS
body
{
background-color:lightgray;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#login
{
text-align:center;
width: 50%;
margin: 0 auto;
}
.picture
{
width:100px;
height: 100px;
border-radius: 100px;
background-color:red;
margin: 0 auto;
}
#login p
{
float: left;
}
input[type=text], input[type=date], input[type=password] {
width: 100%;
height: 50px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
height: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
EDIT:
New fiddle here: https://jsfiddle.net/gay1ufa1/2/
I've improved your HTML. All form inputs should have an associated label element. Also don't use br for spacing use padding/margin instead.
Further more use have a duplicated id, id's must be unique to the page.
#login_container /*This is Our base container for the login "control" */
{
width:30%; /*Define the width of the control*/
margin:auto; /*This Provide the horizontal centering of the control*/
padding:120px 10px 10px 10px; /*Add some padding, the first number is the top and provides room for the image*/
background-image:url(" http://fillmurray.com/100/100"); /*Add our background image, thanks Bill Murray*/
background-position:center 10px; /*Position our image, first is Horizontal alignment, second is top*/
background-repeat:no-repeat; /*One Bil Murray is more than enough*/
background-color: #F0F0F0; /*Base Background image*/
}
#login_container label
{
display:block; /*Label will now take up a whole line*/
margin-bottom:.25em; /*Give it some room underneath*/
}
#login_container input[type="text"], #login_container input[type="password"], #login_container input[type="submit"]
{
width:100%; /*Form controls now take 100% width of the container*/
margin-bottom:0.5em;
}
<div id="login_container"> <!-- Can't have duplicate ID's -->
<form action = "login.php" id="login" method ="POST">
<label for="username">Username </label>
<input type="text" name="username" id="username" required />
<label for="password">Password</label>
<input type ="password" name="password" id="password" required />
<input type="submit" name="submit" value="Log in">
</form>
</div>
One problem in your code is that you use the ID "login " twice, which must not be done. I put together a codepen, which you can find here:
http://codepen.io/anon/pen/dNWQgp
What I basically did (except adding a div representing the image in your picture): I assigned the following CSS to a wrapper DIV around the whole form and image. It uses flexbox to center the contents. Plus I assigned a width setting (40%) to the form element.
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
To center a div set margin-left and margin-right to auto and assign a fixed width to it. In your case, this would be for #login.
When I try to add float left or display inline, things break. Currently, I have a max-width of 1000px for the form. What I was hoping is somehow, the first, and last name will automatically float side by side if it is wide enough. So perhaps a min-width for inputs First and Last name?
Important note: I wrote this to test out writing CSS DRY code. You notice if you change the font size, the whole project changes size, So this is important to me. Also, I do not want to use media queries.
I am aware that I may need to change my approach, and I am open to that as well. Not so much looking for an exact code answer.
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
<form action="">
<ul>
<li>
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li>
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<li>
<input type="submit" name="submit">
</li>
</ul>
</form>
Flexbox is the most modern solution to this problem. However, remember to add the necessary prefixes for some browsers. If IE9 support is necessary, see the float solution below:
HTML
<form action="">
<ul>
<li class="split">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="split">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
<li class="fill">
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
CSS
form {
text-align: center;
}
form ul, form li, form input, form label {
box-sizing: border-box;
margin: 0; padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;;
top: 0; left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input, form input:focus {
text-transform: capitalize;
text-align: inherit;
background: transparent;
border: none;
width: 100%;
font-size: 2em;
padding: .7em .1em;
padding-bottom: .2em;;
}
form input:focus {
background-color: rgba(255, 255, 0, .2);
}
form input[type="submit"] {
text-transform: uppercase;
padding-bottom: 1.8em;
font-size: .6em;
height: 1.5em;
background-color: #ddd;
}
#media only screen and (min-width: 768px) {
li {
clear: both;
}
li.split {
width: 50%;
float: left;
clear: none;
}
}
https://jsfiddle.net/qefo9eLr/
.fl-name {
display: flex;
flex-direction: row;
}
you can try to use bootstrap grid system
this way u can have the inputs into columns
bootstrap grid system
look at this fiddle:
gri system sample
<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
in your case col-xs-6 will give you 2 columns fullwidth
Not exactly sure if this is what you're going for, but it seems to fit your criteria.
form {
text-align: center;
}
form ul,
form li,
form input,
form label {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form ul {
font-size: 100%;
border: 3px solid #000;
border-radius: .3em;
max-width: 1000px;
margin: 50px auto;
list-style: none;
overflow: hidden;
}
form li {
position: relative;
border-bottom: inherit;
border-bottom: 3px solid;
}
form label {
position: absolute;
border-bottom: 1px dotted;
border-bottom-color: inherit;
width: 100%;
padding: .3em .3em;
padding-bottom: .1em;
;
top: 0;
left: 0;
font-size: .6em;
text-transform: uppercase;
}
form input,
form input:focus {
text-transform: capitalize;
}
form #fl-name {
display: inline-block;
}
form .floatMe {
float: left;
}
form .clearMe {
clear: right;
}
<form action="">
<ul>
<div class="fl-name">
<li class="floatMe">
<input id="first-name" type="text" autofocus>
<label for="first-name">First Name</label>
</li>
<li class="floatMe clearMe">
<input id="last-name" type="text">
<label for="last-name">Last Name</label>
</li>
</div>
<li>
<input id="username" type="text">
<label for="username">Username</label>
</li>
<input type="submit" name="submit">
</ul>
</form>
Here is another alternative using our old faithful floats: https://jsfiddle.net/mvpu6s5o/3/
The main difference is basically here:
form li {
width: 33.33%;
float: left;
}
form li:nth-child(3) {
float: right;
}
form li:last-child {
width: 100%;
clear: both;
}
I used a width with percentage to keep it fluid, so it'll adjust to different screen sizes. The li:nth-child(3) float the last input to the right, so we can get rid of a small gap at the end due to the 33.33% width. form li:last-child is used to clear both floats to the last input (since this too is an li).
I just change the semantic and apply flexbox. This is the result:
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
align-items: center;
/background-color: #EB6361;
display: flex;
height: 100vh;
justify-content: center;
}
form {
box-shadow: 0 0 0 8px rgba(204,204,204,.85);
border-radius: 5px;
width: 500px;
}
form header {
background-color: #1ABC9C;
}
form header p {
color: #FFF;
font-family: 'ubuntu';
font-size: 15px;
padding: 15px 10px;
text-align: center;
}
form .body {
background-color: #EEE;
padding: 15px 20px;
}
form .body .block {
border: 2px solid #333;
border-radius: 4px;
overflow: hidden;
}
form .body .block:not(first-of-type) {
margin-top: 10px;
}
form .body .block:first-of-type > .group {
width: 98%;
}
form .body .block:first-of-type {
display: flex;
}
form .body .block .group {
display: flex;
flex-flow: column-reverse nowrap;
overflow: hidden;
}
form .body .block:first-of-type .group:first-of-type {
border-right: 2px solid #333;
}
form input {
background-color: transparent;
border: none;
color: #555;
font-size: 22pt;
padding: 6px 10px;
text-align: center;
}
form input:focus, form input:focus + label {
background-color: #F7F8E0;
}
form label {
border-bottom: 1px dotted #bbb;
color: #555;
font-family: 'ubuntu';
font-size: 11px;
padding: 2px;
text-align: center;
text-transform: uppercase;
}
form footer {
overflow: hidden;
}
form footer button {
background-color: #F39C12;
color: #FFF;
cursor: pointer;
width: 100%;
border: none;
padding: 4px;
}
<form action="">
<header>
<p>Submit Query Form</p>
</header>
<section class="body">
<div class="block">
<div class="group">
<input type="text" />
<label for="">First Name</label>
</div>
<div class="group">
<input type="text" />
<label for="">Last Name</label>
</div>
</div>
<div class="block">
<div class="group">
<input type="text" />
<label for="">Username</label>
</div>
</div>
</section>
<footer>
<button>Submit query</button>
</footer>
</form>
A very simple solution is with Flexbox.
Set the parent element to display type 'flex'.
Also set up flex wrap: wrap // This way the children will wrap if needed.
The children become flex objects. Since I want them to be even, I set them both to flex grow: 1
Set the children to flex-basis as 300px. // This is almost like a minimum width. This triggers the wrap.
body {
padding: 50px;
}
.main {
background-color: #e9e9e9;
display: flex;
flex-wrap: wrap;
}
.main input {
background-color: #e9e9e9;
}
.one {
flex-grow: 1;
flex-basis: 300px
}
.two {
flex-grow: 1;
flex-basis: 300px;
}
<head>
<link rel="stylesheet" href="inline.css">
</head>
<body>
<form class="main">
<input type="text" class="one">
<input type="text" class="two">
</form>
</body>
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>