Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Pseudo-Elements: ::first-line and ::first-letter

float:left in :first-letter


1) why is a float:left needed in the style :first-letter, when we have already given it margin and a padding, shouldnt those(margin and padding) be enough?

2) Does a float:left cause the first letter to break out of the document flow? if it does, then do we need a clear:both?


<!DOCTYPE html>
    margin:80px auto;
    font: normal 1.1em/1.5 Sans-Serif;


    margin:10px 15px;
    padding:5px 15px;


    <p class="intro">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nullam 
        lobortis elit id sem placerat sagittis. Phasellus aliquet ac sem ut aliquet. 
        Maecenas eu magna at nulla viverra euismod.

3 Answers

Justin Hunter
Justin Hunter
Courses Plus Student 11,484 Points

I can't remember the project exactly, but it looks like the float: left is used to ensure the first letter of the paragraph remains at the beginning of the paragraph when you do any additional styling to it. For example, if this was to create a drop-cap, float:left would help keep that letter at the beginning despite the letter being styled differently from the rest of the paragraph.

The float is needed to allow the additional lines of text, depending on first-letter size, to wrap around the first letter. Try removing it or commenting it out to see the difference.

Thanks guys!