GregariousJB GregariousJB - 10 months ago 44
CSS Question

How to stop border-bottom width from overlapping / overflowing onto float-right div


The h1 with the border:

h1 {
font-size: 2.125em;
border-bottom: 1px solid #aaa;
width: 100%;
display: block;

The float-right "Contents":

div {
float: right;
clear: right;
margin-bottom: .5em;
padding: .5em 0 .8em 1.4em;
background: transparent;
max-width: 20em;

How do I remove the lines piercing the Contents section to the right?

Answer Source

If you want to remove the lines where the contents begin you can just add background: #fff; to contents div style.
And if border-bottom must be only under "The Rules" and "Character Setup" you can use text-decoration: underline; instead of border-bottom: 1px solid #aaa; or wrap every h1 in div and add to wrapped h1 display: inline-block;