How to make divs fill the width of its parent? - html

Question

I want my divs(.give, .sep, .take) to fill its parent(.trade)'s width.
HTML code:
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
CSS code:
.trade {
position: relative;
width: 90%;
height: 80px;
border: 1px solid black;
}
.give,
.take {
height: 100%;
display: inline-block;
}
.sep {
width: 20px;
height: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
display: inline-block;
}
But, .give,.take{width:auto;} did not fill it.
I also tried:
.give,
.take {
position:absolute;
width:50%;
}
.sep {
position:absolute;
left:50%;
transform:translate(-50%,0);
}
.give {
left: 0;
}
.take {
right: 0;
}
But .give and .take invaded .sep's place.
How can I make it? I don't want to use Javascript if possible.
+) .give{margin-right:10px;} .take{margin-left:10px;} or .give{padding-right:10px;} .take{padding-left:10px;} didn't work and just expanded their width.

Answer 1

Is this the intended result? flexbox makes this fairly straightforward... The borders and the padding on .trade are for visual aid only
.trade{
display:flex;
flex-direction:row;
justify-content:space-around;
align-content:center;
border:1px solid red;
padding:1rem;
margin:0 auto;
float:none;
width:80%;
height:10rem;
}
.trade div{
border:1px solid black;
flex:1
}
.trade div:before{
content:attr(class)
}
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>

Answer 2

As said by G-Cyrillus, you shouldn't try to hack with float. inline-block is also completely unecessary and far to complicated for your purpose in this case.
The real tool is Flexbox. Add .trade { display: flex; } to the CSS to use flexbox.
Then you can use .give, .take { flex-grow: 1; } to make them extend to fill the entire parents width equally. Instead of using margins to seperate your 3 child elements, you can use .trade { column-gap: 20px; } instead.
.trade {
position: relative;
width: 90%;
height: 80px;
border: 1px solid black;
display: flex;
column-gap: 20px;
}
.sep {
width: 20px;
}
.give,
.take {
flex-grow: 1;
}
/* added for demonstration */
.trade {
background-color: red;
}
.give,
.sep,
.take {
background-color: blue;
}
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>