Hi there semicolon,
change this…
.ll {
padding-bottom: 0;
}
…to this…
.ll {
padding-bottom: 0;
border-bottom: 0;
}
…and add this…
table tr:last-of-type td:nth-child(4) {
border-top: 0;
}
coothead
Now ronpat . . . I’m reading about your
code. Couldn’t I just use CLEAR (something) to reset it? Apologies to Sitepoint but I swear I can’t see a difference in the appearance of the code using your code < / > blocks. 
My last submission does the best job. The CSS is as lean as I could make it. If one needs to use more HTML or more CSS to do the job correctly, one should use it.
I’m sorry but I don’t understand what you would be resetting.
I assume you are comparing the code in posts 31 vs 36.
Post #31 works properly, but it contains the ::before and ::after CSS pseudoelements which have been eliminated by using the linear-gradient backgounds in post #36. So, post #36 is more efficient.
It’s interesting because at first I didn’t like the open space on either side of the two color blocks, but in some ways I prefer it just kind of floating like that. Still, how much more CSS would be involved to render that border on either side of the blocks? Thanks coot.
Okay rp! Now give me an hour to locate the post (jussssst kidding!). Give me a few and let me run it. Have you looked at coot’s mean-n-lean? It has issues with the text in the two blocks (which your version is bulletproof as far as I can see) but worth comparing. 
1 Like
Edit: I think it’s the one beginning:
So let me look at it again. 
That is post #31.
The post that begins with
is post #36.
1 Like
Very little, just change this…
.ll {
padding-bottom: 0;
border-bottom: 0;
}
…to this…
.ll {
padding: 0.32em 0 0;
border-bottom: 0;
}
coothead
Yes but doesn’t the inclusion of this
compromise how flexible the width is in terms of the monitor?
No it doesn’t work coot. It simply removes all padding (LEFT and RIGHT) and instead of filling the bottom border with a 1px-expansion of the blocks, leaves it blank. See the magenta lines in both screenshots, neither one correctly renders the 1px bottom correctly:
Hi there semicolon,
as a septuagenarian with one foot in the grave,
I am havimg great difficulty in understanding what
it actually is that you want, especially as you are
continually moving the goal posts.
Perhaps, you could put your desired result on this image…
…enabling me to then provide you with the appropriate
code. 
coothead
You have language in there with “inherit” and “position” and the reason I try to avoid elements like these is because they are (to my mind) toggle tags: You have to keep track of what you’re toggling.
By clearing the whole thing you’re always certain to get the effect you want because you’ve wiped anything that came before it: You’ll always render what you want because what came before it has been cleared.
Hi there semicolon,
if your just want to move the two divs down by 1px.
then just change this…
.ll div {
display: table-cell;
padding: 0.31em 0 0 0.31em;
background-color: #84d0ef;
}
…to this…
.ll div {
position: relative;
bottom: 0; /* negative values will move it lower */
display: table-cell;
padding: 0.31em 0 0 0.31em;
background-color: #84d0ef;
}
coothead
In this context, those properties do not toggle anything.
inherit is part of the {box-sizing:border-box} “reset” that usually similifies accounting for border widths by including them in the width of the content box.
{position:relative} is used to pull the bottom of the text boxes down over the bottom border. It is not part of a “toggle” either.
I just noticed that there are two appearances of {position:relative} that are unnecessary.
.r4c4 {
background-color:#84d0ef;
background-image:
linear-gradient(to bottom, #fff 0, #fff 5px, transparent 5px, transparent 100%),
linear-gradient(to right, #fff 0, #fff 5px, transparent 5px, transparent 100%);
position:relative; /* DELETE Me. */
text-align:right;
white-space:nowrap; /* BE wary of me. */
border-right:0;
padding-bottom:0;
padding-right:0;
}
.r4c5 {
background-color:#ff0;
background-image:
linear-gradient(to bottom, #fff 0, #fff 5px, transparent 5px, transparent 100%),
linear-gradient(to left, #fff 0, #fff 5px, transparent 5px, transparent 100%);
position:relative; /* DELETE Me. */
text-align:left;
white-space:nowrap; /* BE wary of me. */
border-left:0;
padding-bottom:0;
padding-left:0;
}
That leaves only 1 appropriate {position:relative} in the CSS.
1 Like
@ coot . . . Just be aware that this was from an older graphic that hadn’t yet been manifestly improved with a 6th column:
Thank you rp! Every little bit . . . 
Oh no. 
Apologies if I’m misreading this, but you seem to have a strange idea about clearing. You clear floated items, to prevent other items snagging on them.
Okay.