Layout Techniques - Jump Start CSS - page 51

overflow: hidden;
}
This is a simple float-clearing method that you'll want to keep in mind for smaller elements
like these. For larger layout-related elements, it's almost always better to go with the full-
blown clearfix I introduced earlier. But in this case, we're better off using overflow:
hidden . [2] With this declaration in place, the padding at the bottom of each .media ele-
ment will take effect.
Layout Styles for the Header
Now that we have our “Latest Recipes” section laid out correctly, we have two final areas of
our site to which we want to add some layout styles: the header and footer.
Let's start with the header content, along with the navigation links. Here's the HTML for our
<header> section:
<header>
<div class="center-global cf">
<a href="#"><img src="images/logo.png"
alt="RecipeFinder
↵ logo" class="logo"></a>
<nav>
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Ingredients</a></li>
<li><a href="#">Contributors</a></li>
</ul>
</nav>
</div>
</header>