Clearfix Test

Clearfix-Test.markdown

Clearfix Test

Forked from Ligature Creative Group's Pen Clearfix Test.

A Pen by linda on CodePen.

License.

index.html

<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>

style.scss

*, :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;
}