Question

This question was asked often, but none of the solutions helped we so far.
form‘s width is set to 100%, holder has a relative width of 10%, now I want to fill up all the “free” width by input_edit. Can someone help me? Thank you!!

Here is my HTML

<form>
    <textarea rows="4" name="in" class="input_edit"> </textarea>
    <div id="holder"></div>
</form>

And my CSS

form {
width: 100%;
overflow: hidden;
} 
.input_edit {

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; 

width: auto;

background-color: transparent;
box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
border: 5px solid #666; 
margin: 5px;
border-radius: 5px;
height: 60px;

float: left;

}
#holder { 
border: 5px dashed #666; 
border-radius: 5px;

margin: 5px;
width: 10%; 
height: 60px; 
float: right;
}

EDIT:

holder is 10% for now but I want it to be hidden e.g. on mobile devices so I can’t work with 100-10=90%, also the problem is the box-sizing

Answer 1

The CSS3 width: calc(90% - 30px); would work – however the number of browsers that support it is quite limited.

The next best solution is probably to manually calculate the correct width using jQuery (or JavaScript). Something like:

 $(".input_edit").width($("form").width() - $("#holder").width() - 40);

And then update it whenever the width of form changes.