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
orange sky
Front End Web Development Techdegree Student 4,945 Pointsfloat:left in :first-letter
Hello,
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?
thanks!!
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-Elements</title>
<style>
body{
margin:80px auto;
width:70%;
color:#222;
font: normal 1.1em/1.5 Sans-Serif;
}
.intro::first-line{
color:royalblue;
font-weight:bold;
font-size:32px;
}
.intro::first-letter{
margin:10px 15px;
background:#e0e0e0;
padding:5px 15px;
font-size:100px;
line-height:1;
float:left;
}
</style>
</head>
<body>
<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.
</p>
</body>
</html>
3 Answers
Justin Hunter
Courses Plus Student 11,484 PointsI 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.
Trent Hayes
9,899 PointsThe 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.
orange sky
Front End Web Development Techdegree Student 4,945 PointsThanks guys!