Let div on the leftside take up all the space [duplicate] - html

Question

This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 years ago.
When having 2 divs, one on the left and one on the right.
Is it possible to have the right div aligned all the way right with a fixed width and have the left div take up all the space left?
I don't want to work with inline-

Answer 1

You can use CSS calc() function here to minus the width of fixed .right div from .left div.
The calc() CSS function lets you perform calculations when specifying
CSS property values.
#bx{
background:black;
height:200px;
padding:10px;
}
#bx > .left{
display:inline-block;
width:calc(99% - 200px); /*Minus width of .right using calc()*/
height:100%;
background:yellow;
}
#bx > .right{
display:inline-block;
width:200px;
height:100%;
background:red;
}
<div id="bx">
<div class="left">Left Div</div>
<div class="right">Right Div Fixed Width.</div>
</div>

Answer 2

There are plenty of ways to achieve this, but you may want to use flex-boxes as it's widely used these days.
Check caniuse to see if it meets your browser requirements.
Markup:
<div class="container">
<div class="left-container">Autofill remaining width</div>
<div class="fixed-container">200px</div>
</div>
CSS:
.container{
display: flex;
}
.left-container {
background-color: red;
flex: 1;
}
.fixed-container {
flex-basis: 200px;
background-color: yellow;
text-align: center;
}
Demo

Answer 3

I think this accomplishes what you are after but I'm not sure its the best way...
.container {
width: 100%;
height: 200px;
background-color: green;
}
.sidebar {
float: right;
width: 200px;
height: 200px;
background-color: blue;
}
.content {
background-color: red;
height: 200px;
margin-right: 200px;
}
<div class="sidebar">width: 200px</div>
<div class="content">
</div>