I've been facing this issue over and over again and till this day I wasn't able to find the most optimized solution for it.
Let's say I have 2 DIVs, A and B. Both DIVs are inside a container and have a set of columns assigned to each. What would be the best way to fill a background color for both DIVs AND it would occupy the remaining left and right sides of the screen? With this I mean, the left background color would occupy full left DIV's width remaining left width not used by the element. (same for right side)
Here's an image for better illustration: imagine example
I know that by using linear-gradient we can split the background but in lower/higher viewports, it can become tricky.
I hope it won't be too confusing to understand and I apologize if it's too stupid.
CodePudding user response:
Can't you color the containers and make the div tranparent ?
<div class="orange-container">
<div class="transparent-div">
// Stuff here
</div>
</div>
<div class="blue-container">
<div class="transparent-div">
// Stuff here
</div>
</div>
CodePudding user response:
Ok, I think the best way to do this is by having the following:
<div style="background: linear-gradient(90deg, #8A66B9 50%, #ffff 50%);">
<div class="container">
<div class="row">
<div class="col-7" style="background-color:#8A66B9">
A
</div>
<div class="col-5" style="background-color:#ffff">
B
</div>
</div>
</div>
</div>
Thus, I have a parent DIV which has the background 50/50. Then, I set the background color for each of the backgrounds.