I need my divs(.give, .sep, .take) to completely fill the width of its parent container (.trade).
This is the HTML code:
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
Here is the 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;
}
Despite trying .give,.take{width:auto;}, it did not achieve the desired result.
I also attempted this solution:
.give,
.take {
position:absolute;
width:50%;
}
.sep {
position:absolute;
left:50%;
transform:translate(-50%,0);
}
.give {
left: 0;
}
.take {
right: 0;
}
However, .give and .take ended up overlapping with .sep.
What would be the best way to make this layout work without relying on Javascript?
Additionally, trying
.give{margin-right:10px;} .take{margin-left:10px;}.give{padding-right:10px;} .take{padding-left:10px;}