Having trouble styling nested DIVs (check out this example). Is there a solution?
I'm working with dynamically rendered nested DIVs (each with class="box"), like so:
<div class="box" id="1">
other content
<div class="box" id="2">
<div class="box" id="3">
</div>
</div>
other content
<div class="box" id="4">
</div>
</div>
other content
My goal is to have each of these DIVs display a bottom border, like this:
<style>
div.box {border-bottom: solid 1px gray;}
</style>
However, I've run into an issue when the bottom borders of two adjacent nested DIVs meet (e.g. box 2 and 3 or box 1 and 4). This results in a thicker gray line than intended.
Is it possible to collapse the borders of these neighboring nested DIVs for a cleaner look?
I did try adding border-collapse: collapse, but unfortunately, that didn't solve the problem.