CODEWITHSUNDEEP
htmlcss
medievalmatt
medievalmatt

Reputation: 491

CSS styling -- span with different font size inside of div

I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:

enter image description here

As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:

<div class="comparison" id="EETS.QD.1" style="display: block;">
    <div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251: 
        <a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
            <span class="capital_2_blue">W</span>
         ho shal gyve · vnto my hede a welle 
        </a>
   </div>
</div>

with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:

div.comparison { 
    display: block;
    height: auto; 
    width: 755px;
    margin-right: 10px;
    padding-left: 10px;
    margin-left: auto; 
    background-color: #454595; 
    border-width: 1px; 
    font-size: 12pt; 
    color: #EFFFFF; 
    display: none;
} 

span.capital_2_blue{
    float: left;
    color: blue;
    font-size: 60pt;
    line-height: 12pt;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:

enter image description here

I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:

enter image description here

How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.

Upvotes: 1

Views: 1363

Answers (1)

Sergiy T.
Sergiy T.

Reputation: 1453

You should remove float:left and add display:inline-block to span.capital_2_blue.

That is because floated content removed from normal flow and other content will wrap around it. https://developer.mozilla.org/en-US/docs/Web/CSS/float

Upvotes: 1

Related Questions