HTML and CSS Reference
In-Depth Information
Here you can see that, although the width of the footer area has expanded to the left and
right (mimicking what might happen on a wider browser window), the content itself stays
centered. The extra element inside <footer> helps achieve this.
There's a problem, though. The styles in each of these three declaration blocks ( .header-
inside , . promo , and .footer-inside ) are exactly the same, and they even match the
styles we added to the .main element. Here's an opportunity for us to take these common
styles and create a simple reusable class that we can apply to any element that needs these
exact styles.
So instead of four separate rule sets with the same styles, we'll have one rule set as follows:
.center-global {
width: 1020px;
margin: 0 auto;
And then we'll add that class to every HTML element that needs those styles. Because of this
reusable class we've created, we'll no longer need the .header-inside class, so we'll re-
move that from our HTML and CSS. The .promo and .footer-inside classes will be
used later, so we'll keep those.
Floating the “Latest Recipes” Images
We've already used the float property to help build our primary two-column layout. Next,
we'll use the same property for its intended purpose: to allow text and inline content to flow
around a floated block element. In our HTML, we have a simple structure for each of the
entries added in our “Latest Recipes” section:
<div class="media">
<a href="#">
<img src="images/haddock.jpg" alt="Haddock skewers">
<h2>Zesty Smoked Haddock Skewers</h2>
<p>Cooking time: 20 minutes</p>
Search WWH ::

Custom Search