We Keep Coding

css show validation message above the input field

Given that I have the following html bit:
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField.error {
content: 'validation error occurred';
display: block;
}
<form>
<div id="myField">
<p class="required">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
how can I show the validation error message above the input field, floating to the right? I don't want to modify the html code manually. However, adding some span tag using jquery or js is fine. All said, a css solution is preferred.

I made small change to your html, moved the error class from input to p element. And in css used ::before CSS pseudo element (and took the liberty to add a red border for input & red color for error message)
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField .error::before {
content: 'validation error occurred';
position: absolute;
top: -4px;
color: red;
}
#myField .error input {
border-color: red;
}
<form>
<div id="myField">
<p class="required error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
JS Fiddle link for this code

Have a input box fill the remainder of the html page

I have looked at a lot of these pages and questions with this. I have found the right answer but I cannot figure it out to save my life. I want to do something very similar to the second question, but I cannot figure out how to do it.
Style input element to fill remaining width of its container
What I am trying to do is have all the input stretch the whole way to the other side, but they are just stopping at the end of the form section. I feel that the form is my issue and not the input boxes. How do I get the form to stretch to the width of its parent. I have attached the whole code now to see if that helps.
<style>
div.modal-header{background-color: #1A2930; color: white; }
div.modal-footer{ background-color: #1A2930; color: white; }
div.modal-body{ background-color: #F0F0F0; color: #0A1612; width: 100%; }
div.movement-modal-form{ width: 100%; }
label
{
float: left;
font-size: 20px
}
span{
display: block;
overflow: hidden;
width: 100%
}
input
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
color: black;
width: 100%;
height: 25px;
font-size:12px;
vertical-align:0px
}
textarea
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
width : 100%
}
</style>
<div id="movement-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">❌ </button>
<h4 id="modal-title" class="modal-title">{{#i18n}}inventory.modify.button.new-movement{{/i18n}}</h4>
</div>
<div class="modal-body">
<form id="movement-modal-form"
>
{{>inventory/partials/movement-id-field-modal}}
{{>inventory/partials/product-fields-modal}}
<br/>
<p>
<!--This is #4-->
<label id="movement-lable" for="movement-date">{{#i18n}}inventory.modify.table.movement-date{{/i18n}}</label>
<input id="movement-date" class="movement-date" type="date" required>
</p>
<br/>
<p>
<!--This is #5-->
<label for="store-from">{{#i18n}}inventory.modify.table.store-from{{/i18n}}</label>
<br/>
<br/>
<select id="store-from" class="store-from"required>
{{#inventoryStoreList}}
<option value={{ id }}>{{ name }}</option>
{{/inventoryStoreList}}
</select>
</p>
<br/>
<p>
<!--this is # 6-->
<label for="store-from-current-quantity">{{#i18n}}inventory.movement.modal.store-from-current-quantity{{/i18n}}</label>
<input id="store-from-current-quantity" class="store-from-current-quantity" type="text" disabled>
</p>
<br/>
<p>
<!--This is # 7-->
<label for="store-to">{{#i18n}}inventory.modify.table.store-to{{/i18n}}</label>
<select id="store-to" class="store-to" required>
{{#inventoryStoreList}}
<option value={{ id }}>{{ name }}</option>
{{/inventoryStoreList}}
</select>
</p>
<br/>
<p>
<!--8-->
<label for="store-to-current-quantity">{{#i18n}}inventory.movement.modal.store-to-current-quantity{{/i18n}}</label>
<input id="store-to-current-quantity" class="product-current-quantity" type="text" disabled>
</p>
<br/>
<p>
<!--9-->
<label for="movement-quantity">{{#i18n}}inventory.modify.table.quantity-requested{{/i18n}}</label>
<input id="movement-quantity" class="movement-quantity" type="number" step="1" min="1" pattern="\d*" required>
</p>
<br/>
<!--10 Notes-->
{{>inventory/partials/note-field-modal}}
<input type="submit" style="display: none">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" style="float: left">{{#i18n}}inventory.modify.button.cancel{{/i18n}}</button>
<button id="movement-modal-submit" type="button" class="btn btn-success" style="float: right">{{#i18n}}inventory.movement.modal.button.save{{/i18n}}</button>
</div>
</div>

It looks like your modal-body.width value isn't working like you intend. I'm not sure if your question is clear, but it looks like you want the input to be the width of the modal-body.
If that is the case, then you could just set the width on the movement-date class to 100%. This will set the width of the input element to be 100% width of the parent element, in this case, the modal-body.
div.modal-body{
background-color: white;
color: black;
margin: 20px 0 20px 0;
padding: 15px;
width: 500px;
overflow: hidden;
}
input.movement-date {
background-color:lightgray;
border: solid 2px #6E6E6E;
width: 100%;
height: 25px;
font-size:12px;
vertical-align:0px;
}
<div class="modal-body">
<form id="movement-modal-form">
<p>
<label id="movement-lable" for="movement-date"></label>
<input id="movement-date" class="movement-date" type="date" required/>
</p>
</form>
</div>

Getting an error message to show up inline of input

I added the jQuery validate plugin to validate a contact form I have, but I am running into an issue. I am trying to get my error class to show up inline of the input field in which the error is. However, it is only displaying in block. I know this is because I have display: block !important; for my input class, but if I take that away, it moves my blocks inline whenever there is an error.
Does anyone know how I can resolve this?
Please look in the comments to see a jsfiddle. I was unable to figure out how to insert an external source in the snippet.
<form id="contactform" method="post" action="" novalidate>
<input class="contact_input" type="text" name="name" placeholder="Name">
<input class="contact_input" type="email" name="email" placeholder="Email">
<textarea class="contact_input" name="message" placeholder="Message"></textarea>
<input type="submit" name="submitform" value="Send">
</form>
CSS
.contact_input {
display: block !important;
margin-bottom: 15px;
width: 300px;
}
.error {
color: red;
display: inline;
padding-left: 20px;
}

I think the following CSS works:
.contact_input {
display: block !important;
margin-bottom: 15px;
width: 300px;
}
.error {
color: red;
float: left;
margin-left: 10px;
}
.clear {
clear: both;
padding: 10px;
display: block;
}
Please let me know if it works for you too.
EDIT:
Please let me know if this works: https://jsfiddle.net/wgtLnxfw/6/
It has changes to mark up and css.

You can use the markup and css as below.
Check demo: Fiddle
<form id="contactform" method="post" action="" novalidate>
<div>
<input type="text" name="name" placeholder="Name">
</div>
<div>
<input type="email" name="email" placeholder="Email">
</div>
<div>
<textarea name="message" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" name="submitform" value="Send">
</div>
</form>
#contactform input[type="text"], input[type="email"], textarea {
margin-bottom: 15px;
width: 300px;
float: left;
}
#contactform div {
overflow: auto
}
.error {
color: red;
display: block;
}

How to get a secondary div to always have the same height as the first div?

I have two divs, called signin and info.
I want to make info to always have the same height as signin and if the text inside doesnt fit to make info have a scrollbar.
Is it possible to obtain this via some simple JS, html and css?
Here is what i have tried:
var firstDivHeight = document.getElementById('#signin').clientHeight;
document.getElementById("#info").style.height = firstDivHeight;
Here is a jsfiddle with all my html and css http://jsfiddle.net/sleshwave/4v7bvw5o/
Thank you.

I would use display:table, in most cases, too, BUT because of your specific requests:
1) info bar should have same height as form bar (not vice versa, #signin dictates info bar height)
2) info bar can have more content, and needs scrollbar, too
i would use this:
window.onload = function(){
firstDivHeight= document.getElementById('signin').offsetHeight;
document.getElementById("info").style.height = firstDivHeight+'px';
}
In css:
#info {
background-color: red;
float: left;
margin-left: 2%;
overflow-y:auto;
width:50%; //add desired width
}
Demo: http://jsfiddle.net/29mzjq5x/3/
Notice: i've used offsetHeight, rather than clientHeight, because it will calculate paddings, and borders too...

Change a little the structure and use the display:table/table-cell; properties.
http://jsfiddle.net/4v7bvw5o/3/
#import http://fonts.googleapis.com/css?family=Roboto;
#signin {
display:table;
border-spacing:1em;
}
form {
background-color: red;
width: 20%;
margin-left: 2%;
text-align: center;
display:table-cell;
}
input[type=text], input[type=password], input[type=email] {
width: 92%;
padding:10px;
margin-top:8px;
border:1px solid #ccc;
padding-left:5px;
font-size:16px;
font-family:Roboto;
background-color: rgba(211, 211, 211, 0.3);
}
#info {
background-color: red;
display:table-cell;
}
input[type=submit] {
width:92%;
background-color:#1471BF;
color:#fff;
border:2px solid #1471BF;
padding:10px;
font-size:20px;
cursor:pointer;
font-family: Roboto;
margin-bottom:15px;
-webkit-transition:border 0.3s, background-color 0.3s;
transition:border 0.3s, background-color 0.3s;
}
input[type=submit]:hover {
background-color: #B93948;
border:2px solid #B93948;
}
<!doctype html>
<title>New account</title>
<body style="background-color:#232324">
<h1 style="text-align:center">Creating a new account</h1>
<div id="signin">
<form>
<br>
<label>Username</label>
<p></p>
<input id="name" name="username" type="text">
<p></p>
<label>Email</label>
<p></p>
<input id="email" name="email" type="email">
<p></p>
<label>Name</label>
<p></p>
<input id="nume" name="name" type="text">
<p></p>
<label>Last Name</label>
<p></p>
<input id="prenume" name="lastname" type="text">
<p></p>
<label>Password</label>
<p></p>
<input id="password" name="password" type="password">
<p></p>
<label>Confirm password</label>
<p></p>
<input id="repassword" name="password_conf" type="password">
<p></p>
<input name="submit" type="submit" value=" Register">
</form>
<div id="info">
<p>This is the story about a guy named blue</p>
</div>
</div>
</body>

GCyrillus's solution is better because it doesn't require javascript, you could also try a similar layout using flexbox.
If you want to use javascript however, this should work.
var firstDiv = document.getElementById('signin');
var secondDiv = document.getElementById('info');
secondDiv.style.height = firstDiv.clientHeight + 'px';
Notice that this code should only run when the page is already loaded!

I don't like to use table for layout.
You can use flex box layout, it has a good support in all major browsers.
http://caniuse.com/#feat=flexbox
Suggested solution:
Include both divs (.col) in other container (#container-div)and display it as flex
#container-div {
Display: flex;
}
Use flex-grow property to grow the flex item to full width.
.col{
Flex: 1;
}
Don't forget to add vendor prefixes to support all browsers

Placing static text at the end of an input field using HTML

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "#gmail.com" at the end of an input element field using HTML and CSS. My question is how could this be accomplished? I got the idea from the bootstrap validation states icons.
For example the input field would look like..
I hope this makes sense.. If you have any questions feel free to ask.
This text should stay static as the user types, which is what seperates it from a input field.
Here's some code that I have:
<form id="loginForm">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
</div>
<br>
<div class="form-group">
<input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
</div>
<br>
<span class="visible-lg">
<button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<span class="hidden-lg">
<button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
</span>
<br>
</fieldset>
</form>
My css:
.loginSpinner{
display: none !important;
}
#badLogin{
display: none;
}
#badRequest{
display: none;
}
#createAccountForm{
display: none;
}
.createSpinner{
display: none !important;
}
#forgotPassword{
display: none;
color: red;
}
#usernameField:before{
content:"#gmail.com";
background-color:yellow;
color:red;
font-weight:bold;
}
JSFiddle: http://jsfiddle.net/UMBRd/

Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.
HTML
<div class="input-container">
<input type="text"/>
</div>
CSS
.input-container {
position: relative;
float: left;
}
.input-container:after {
position: absolute;
right: 0;
top: 0;
content: '#gmail.com';
}
See this fiddle.
Note, the pure CSS way with pseudo-elements won't work as discussed in this post.

The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:
HTML
<div>
<span>#gmail.com</span>
<input type="text" />
</div>
CSS
div {
position: relative;
}
span {
display: inline-block;
width: 200px;
position: relative;
line-height:95px;
text-align:right;
}
input {
position: absolute;
left: 10px;
top: 35px;
background-color: transparent;
width:200px;
height: 20px;
}
http://jsfiddle.net/pemep/