Make div fit next to another div at all times - html

Question

I have 3 divs. One of them is functioning as a wrapper for the other two.
Let's call them div1 and div2. Div1 has a fixed width. The width of the wrapper is variable but never less then the width of div1.
Now, how do I make div2 always have the width (width of wrapper - width of div1)?
Here is what I got:
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
}
.div1 {
width: 200px;
height: 200px; /*Fixed*/
border: 2px solid #FF0000;
display: inline-block;
}
.div2 {
position: absolute;
width: 100%; /*Should be width of wrapper - width of div1*/
height: 200px;
border: 2px solid #00FF00;
display: inline-block;
}
https://jsfiddle.net/kjhnhtny/10/

Answer 1

If I have not mistaken your question, you can use a pure css approach.
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
box-sizing: border-box;
}
.div1 {
width: 200px;
height: 200px; /*Fixed*/
border: 2px solid #FF0000;
float: left;
box-sizing: border-box;
}
.div2 {
width: 100%; /*Should be width of wrapper - width of div1*/
height: 200px;
border: 2px solid #00FF00;
box-sizing: border-box;
}

Answer 2

You're looking for two things:
To set float: left on .div2
The CSS calc() function, which can handle subtraction. Specifically, you're looking for width: calc(100% - (200px + (2px * 2) + (2px * 2))), which is 100% of the.wrapper, minus the width of .div1, along with both sides of both element's border width.
This can be seen in the following:
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: 2px solid #0000FF;
}
.div1 {
width: 200px;
height: 200px; /*Fixed*/
border: 2px solid #FF0000;
display: inline-block;
}
.div2 {
float: left;
width: calc(100% - (200px + (2px * 2) + (2px * 2))); /*Should be width of wrapper - width of div1*/
height: 200px;
border: 2px solid #00FF00;
display: inline-block;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
Note that you could make use of CSS variables so that you only need to modify one property's value (with all elements being automatically adjusted), by setting a variable in :root and referencing it with var().
Having said that, CSS variables would probably be a bit overkill, but I'll show you how can use them in case you opt for this approach. Try adjusting the --border-width in the following, and you'll see that all elements update and resize appropriately :)
:root {
--width: 200px;
--border-width: 2px;
}
.wrapper {
width: 420px; /*Variable but not less then width of div1*/
height: 500px;
border: var(--border-width) solid #0000FF;
}
.div1 {
width: var(--width);
height: 200px; /*Fixed*/
border: var(--border-width) solid #FF0000;
display: inline-block;
}
.div2 {
float: left;
width: calc(100% - (var(--width) + (var(--border-width) * 2) + (var(--border-width) * 2))); /*Should be width of wrapper - width of div1*/
height: 200px;
border: var(--border-width) solid #00FF00;
display: inline-block;
}
<div class="wrapper">
<div class="div1">
</div>
<div class="div2">
</div>
</div>