input element to fill remaining width of its container

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 eg 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.

Answer 2

You will have to remove the margin on the .input_edit and #holder, and apply box-sizing: border-box; to those elements.

Border-box puts the padding and borders in the 10% & 90%, not the margins. To get a better idea how to create gutters, I suggest you watch this video: http://css-tricks.com/video-screencasts/115-dont-overthink-it-grids/

I'm pretty sure that will answer a lot of your questions.