Edit in JSFiddle

<span class='droppedcap'>U</span>sing SPAN with appropriate CSS to provide dropcap explicitly. This should work well enough for our purposes.
<br>
<img style='float:left;' src='http://picsofcanada.com/images/mowat.jpg' height='40'>
<div class='box'>
    <p>This dropcap uses :first-line and :first-letter. We add some ecclesiastical Latin filler to see the drop down first letter effect - Dominis vobiscum et cum spiritu omnis. Dominis vobiscum et cum spiritu omnis.</p>
    <div>In a div with only :first-letter pseudo-code. The result is still effective dropcapping determined by line-height setting. Try values from 4px to 48px to see results on "dropping".</div>
    <p><b>Note:</b> the p:first-child works in this second paragraph but because of the font-size difference the first letter does not line-up.</p>
    <p class='dropcapper'>Another try at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic.at this vexing topic. Very vexing topic. Very vexing topic. Very vexing topic. Very vexing topic. Very vexing topic. Very vexing topic.</p>
    <div class='wraps'>
        <nav>Did this provide insights into drop cap styling? If so big thanks to <a href='http://www.hongkiat.com/blog/css-better-paragraph/' target='_blank'>Thoriq Firdaus at hongkiat.com</a> for this more ambitious example of what can be done with Dropcap styling with the help of :firstchild, :first-letter, :first-line and :after CSS pseudo classes. Note that :after is used to position the paper clip image at the end of the first line. In some cases it overlays the text which as an effect "works".</nav>
    </div>

p {
    color:green;
    font-size:12px;
}
p:first-child {
    color:blue;
    font-size:20px;
    font-weight:bold;
}
p:first-child:first-letter {
    font-size:32px;
    line-height:32px;
}
p:first-letter {
    font-size:40px;
    float:left;
}
div:first-letter {
    font-size:40px;
    float:left;
    line-height:44px;
}
p.dropcapper:first-letter {
    font-size: 44px;
    float: left;
    color: #D4D4C7;
    line-height: 35px;
    padding-top: 3px;
    padding-right: 3px;
    font-family: Times, serif, Georgia;
}
nav:first-child {
    padding: 10px;
    border-left: 5px solid #7f7664;
    background-color: #f5f4f2;
    line-height: 20px;
    box-shadow: 5px 5px 0px 0px rgba(127, 118, 100, 0.2);
    position: relative;
}
nav:first-child:first-letter {
    font-size: 72px;
    float: left;
    padding: 10px;
    height: 64px;
    font-family:'Arial';
    background-color: #7F7664;
    margin-right: 5px;
    color: white;
    border-radius: 5px;
    line-height: 70px;
}
nav:first-child:first-line {
    font-weight: bold;
    font-size: 24px;
    color: #7f7664;
}
nav:first-child:after {
    background: url("http://demo.hongkiat.com/css-better-paragraph/images/paper-clip.png") no-repeat scroll 0 0 transparent;
    content:" ";
    display: inline-block;
    height: 100px;
    position: absolute;
    right: -5px;
    top: -35px;
    width: 100px;
}
.droppedcap {
    float: left;
    color: #903;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: Georgia;
    ]
}