GregariousJB GregariousJB - 2 months ago 12
CSS Question

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

img

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

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;

Comments