Forked from Ligature Creative Group's Pen Clearfix Test.
Created
March 26, 2015 04:04
-
-
Save klinda/3e4a9a44be48ce28f7ad to your computer and use it in GitHub Desktop.
Clearfix Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Instructions</h1> | |
<ul> | |
<li>Update the CSS so that the blue 'child' div is full contained by the pink 'parent' div.</li> | |
<li>Don't cut off the 'Headline Text' that's sticking outside of the 'parent' div!</li> | |
</ul> | |
<h2>Extra Credit</h2> | |
<ul> | |
<li>If you can fix with clearfix hack without Google!</li> | |
</ul> | |
<hr /> | |
<div class="parent clearfix"> | |
<h1 class="headline">Headline Text</h1> | |
<div class="child"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, libero, iure! Minus?</p> | |
</div> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dignissimos veritatis mollitia.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, libero, iure! Minus?</p> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*, :before, :after{ box-sizing: border-box; } | |
body{ padding: 2em; } | |
.parent, | |
.child{ | |
padding: 2em; | |
} | |
.parent{ | |
background: pink; | |
position: relative; | |
margin: 2em 0; | |
.headline{ | |
left: 0; top: -1.2em; | |
position: absolute; | |
} | |
} | |
.child{ | |
width: 16em; | |
float: right; | |
margin-left: 2em; | |
background: lightblue; | |
} | |
.clearfix:after { | |
clear: right; | |
content: "."; | |
display: block; | |
height: 0; | |
line-height: 0; | |
visibility: hidden; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment