We Keep Coding

css align multiple line contenteditable content on right side

I'm trying to make a basic multi-line input form with html css etc... For the inputs I'm using a contenteditable="true" span instead of the regular , and also I don't want to use tables.
That being said, I'm trying to line of the text "labels" and the input boxes, like this picture:
everythings working fine more or less, except when the contenteditable reaches multiple lines. I need the multi-line thing to line up with the labels and not reset to the beginning of the line. Here's the code so far:
input, .new_input {
border:0;
outline:0;
background:transparent;
border-bottom:1px solid black;
}
.titlething {
display:inline-block;
text-align:right;
width:80px;
margin-left:-20px;
}
#word_edit {
position:absolute;
max-width:300px;
border:1px #0F23D5 solid;
padding:4px;
background:#A1C9E4;
border-radius:15px;
padding:15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>
As you can see, everything works more-or-less until you get to the next line, but I need the new line to start at the same place as the first line.
Any ideas?

Please look at the snippet below, I added 2 lines:
display: inline-block; to .new_input
and
vertical-align: top; to .titlething
input,
.new_input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
display: inline-block;
}
.titlething {
display: inline-block;
text-align: right;
width: 80px;
margin-left: -20px;
vertical-align: top;
}
#word_edit {
position: absolute;
max-width: 300px;
border: 1px #0F23D5 solid;
padding: 4px;
background: #A1C9E4;
border-radius: 15px;
padding: 15px;
}
<div id="word_edit">
<label>
<span class="titlething">Meaning</span>
<span class="new_input" data-placeholder="Meaning:" data-name="meaning" contenteditable="true">some default text</span></br>
</label>
<label>
<span class="titlething">Phonetic</span>
<span class="new_input" data-placeholder="Phonetic:" contenteditable="true" data-name="phonetic">hi</span></br>
</label>
<label>
<span class="titlething">Other</span>
<span class="new_input" data-placeholder="Other:" contenteditable="true" data-name="other">test</span></br>
</label>
<button data-name="done">Done!</button>
</div>

How can I set "fill_parent" value as an element's width?

First of all I have to say this seems an identical question with mine. But it isn't.
I have this HTML:
.parent{
border: 1px solid gray;
width: 70%;
}
.title{
border: 1px solid green;
}
.input {
/* width: fill_parent; */
}
<div class="parent">
<span class="title">title: </span>
<input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>
All I need is setting a value which means something like fill_parent as that input's width. As you see, the width of that .parent is based on percentage, so it will be changed when the size of screen changes. That's why I cannot use a value based on px as .input's width.
Note: .input{width: 100%;} isn't what I'm looking for, because I need to keep both the title and input in the same line.
Any suggestion?

You can put display:flex; on your parent and then flex:1; on your input.
.parent{
border: 1px solid gray;
width: 70%;
display:flex;
}
.title{
border: 1px solid green;
}
.input {
flex:1;
}
<div class="parent">
<span class="title">title: </span>
<input class="input" name="title" type="text" placeholder="عنوان دقیقی انتخاب کنید">
</div>

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

Display different divs on the same page

I need to display div="block2" when the user clicks "Yes" and display div="block3" when the user clicks "No".
Question:
1.How do I display both block2 & block3 at the same place where block2 is currently displayed.
2. Block2 needs to be hidden when clicked "No" and Block3 needs to be hidden when clicked "Yes"
<div id="block1">
<input type="submit" value="Yes"/>
<input type="submit" value="No"/>
</div>
<div id="block2">
Block2
</div>
<div id="block3">
Block3
</div>
css
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
border-style:solid;
border-color:green;
}
#block2{
height:90%;
width:50%;
float:right;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
border-color:green;
}
#block3{
height:80%;
width:50%;
float: left;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
border-color:green;

You can display them in the same place using position: absolute; top: 0; left: 0. Just set whatever the parent div is, to position: relative.
You can use javascript or a library like jQuery to listen for the click, and show the right element.

Here is one possible solution that may work for you:
Fiddle Demo
I added added a wrapping container to your content blocks, and tweaked the CSS a tiny bit.
HTML:
<div id="block1">
<input id="yes" type="submit" value="Yes"/>
<input id="no" type="submit" value="No"/>
</div>
<div class="container">
<div id="block2">
Block2
</div>
<div id="block3">
Block3
</div>
</div>
CSS:
//new entries
.container{
position: relative;
height: 300px;
}
.hidden {display:none;}
edit (added a second way to do this using delegation) JS:
$('#yes').on('click', function () {
$('#block2').toggleClass('hidden');
});
$('#no').on('click', function () {
$('#block3').toggleClass('hidden');
});
// OR
$('#block1').on('click', 'input', function () {
$('.container').children('div').eq( $(this).index() ).toggleClass('hidden');
});

http://jsfiddle.net/zcWJ6/6/
html:
<div id="block1" class="box">
<input id="yes" type="submit" value="Yes"/>
<input id="no" type="submit" value="No"/>
</div>
<div id="container">
<div id="block2" class="box">
Block2
</div>
<div id="block3" class="box">
Block3
</div>
</div>
css:
#container {
position: relative;
height: 100px;
width: 50%;
}
#block1 {
height:10%;
width:50%;
text-align:center;
border-bottom: none;
}
#block2{
background: violet;
position: absolute;
}
#block3{
background: yellow;
position: absolute;
}
.box {
height:100%;
width:100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
border: 2px solid #000;
}
js:
$('#yes').click(function(){
$('#block3').hide();
$('#block2').show();
});
$('#no').click(function(){
$('#block2').hide()
$('#block3').show();
});

Make javascript string of div2 and div3 content.
Now add one more div.
<div id="displayhere"></div>
store your div2 and div3 in javascript string. User Jquery click event. After click event add the div2 content to displaynone html.
$("#display2").click(function(){
$("#displayhere").html("div2 content javascript string");
});

Make fields editable when a button is clicked

the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:
<div class="field-group">
...............
....................
<div class="field field-omschrijving">
<label class="label">E-mailadres</label><div>#client.email</div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label><div>#client.phoneNumber</div>
</div>
<input type="submit" class="form-submit" value="Change" name="op">
</div><!-- /.field-group -->
I've been looking for a solution but no success, any idea about how can I do it? Thanks!
Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:!
I want it looks like this:
And after clicking in the "Change" button it has to look like the first image. Thanks again!

Using this code after click you can change your label to input, as in you pictures.
It will help you now, hope
$( ".button_class" ).click(function() {
$('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
});
Here is an example:
<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
$( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}
Result is:
<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>
Hope, it will help

Give id to button and input fields for email and ph no.
On click of button, hide the lebel and show input fields.
<div class="field-group">
<div class="field field-omschrijving">
<label class="label">E-mailadres</label>
<div id="divemail">#client.email</div>
<div id="divemailinput"><input type="text" id="emailId"/></div>
</div>
<div class="field field-omschrijving field-last">
<label class="label">Telefoonnummer</label>
<div id="divno">#client.phoneNumber</div>
<div id="divnoinput"><input type="text" id="emailId"/></div>
</div>
<input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->
JS
$("#btnchange").click(function(){
$("#divemail").hide();
$("#divemailinput").hide();
$("#divno").hide();
$("#divnoinput").hide();
});

For the first you need is put your
#client.emailand #client.phoneNumber into inputs and set them inactive.
Then, and after clicking change them to active by using javascript.
<input type="text" class="emailand_clas" readonly="readonly" >#client.emailand </input>
and using jquery:
$( ".button_class" ).click(function() {
$('.emailand_clas').attr('readonly','')
});
Some thing like this

Look at this JSFiddle or my blog for a great example.
http://jsfiddle.net/biniama/YDcFF/
<!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
$('#submitBtn').click(function(){
$('.enableOnInput').prop('disabled', false);
$('#submitBtn').val('Update');
});
});
</script>
<style type='text/css'>
/* Lets use a Google Web Font :) */
#import url(http://fonts.googleapis.com/css?family=Finger+Paint);
/* Basic CSS for positioning etc */
body {
font-family: 'Finger Paint', cursive;
background-image: url('bg.jpg');
}
#frame {
width: 700px;
margin: auto;
margin-top: 125px;
border: solid 1px #CCC;
/* SOME CSS3 DIV SHADOW */
-webkit-box-shadow: 0px 0px 10px #CCC;
-moz-box-shadow: 0px 0px 10px #CCC;
box-shadow: 0px 0px 10px #CCC;
/* CSS3 ROUNDED CORNERS */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-color: #FFF;
}
#searchInput {
height: 30px;
line-height: 30px;
padding: 3px;
width: 300px;
}
#submitBtn {
height: 40px;
line-height: 40px;
width: 120px;
text-align: center;
}
#frame h1 {
text-align: center;
}
#frame div {
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div id='frame'>
<div class='search'>
<h1>jQuery Enable and Disable button</h1>
<input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/>
<input type='submit' name='submit' id='submitBtn' value='Edit'/>
</div>
</div>
</body>
</html>

Now HTML5 is available so .
We can use attribute
contenteditable
More help and details
http://html5doctor.com/the-contenteditable-attribute/

<label class="label">E-mailadres</label>
<input type="text" class='email' value='#client.email' />
document.getElementsByClassName('form-submit').onclick=function(){
document.getElementsByClassName('email').disabled=false;
};