Hipstirred Layout: Fine-Tuning with the Box Model

Topics Covered in This HTML & CSS Tutorial:

Removing the Extra Space Below an Image, Setting a Max-width, Outer & Inner Wrappers, the Difference Between ID & Class Selectors

Exercise Preview

Exercise Overview

In this exercise, you will refine the spacing and width of the layout for the Hipstirred site. Along the way, you’ll investigate wrapping content in container divs and firm up your understanding of how an ID selector differs from a class selector.

1. We’ll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion.
2. For this exercise we’ll be working with the Hipstirred Box Model folder located in Desktop > Class Files > Web Dev Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Hipstirred Box Model folder.

4. Preview index.html in Chrome to see what we have so far. (We will be using Chrome’s DevTools.)

   Let’s start by adding the logo to the header, and then styling the footer.

   NOTE: We recommend leaving index.html open in Chrome as you work, so you can reload the page to see the changes you make in the code.

Adding the Logo to the Header

1. Return to index.html in your code editor.

2. In the header add the following image:

   <header>
      <img src="images/logo.png" height="36" width="105" ALT="Hipstirred">
   </header>

   NOTE: We’re coding a width and height for this logo because it’s always going to be a fixed size in the layout. If the size was going to be flexible, we’d omit the height and width.

3. Save the file.

4. Return to the browser to reload the page. The logo is way too tight against the top-left edge, but before we add space around it, notice that there’s a little extra space below the logo. Why is that?

Removing the Extra Space Below an Image

Images are rendered on a line of text as though they’re part of a paragraph, even though they’re not in a paragraph tag. By default, text (and images) are vertically aligned to the text baseline (where the bottom of each letter is positioned as you would when writing on lined paper).

Baseline makes sense for text, including lowercase characters like j and g. However, for images, which don’t have descenders, the default vertical-align: baseline creates extra, unfilled space below them. A simple fix is to vertically align images to the bottom (middle will also work in this case), rather than the baseline. The following diagram illustrates this:

1. Return to index.html in your code editor.

2. Add a class of logo to the image in the header, as follows:

   <header>
      <img src="images/logo.png" class="logo" height="36" width="105" ALT="Hipstirred">
   </header>

3. Save index.html.
4. Open main.css from the Hipstirred Box Model folder.

5. Add the following new rule below the rule for p:

   .logo {
      vertical-align: middle;
   }

   NOTE: Instead of middle we could also use bottom (as previously explained).

6. Save main.css.
7. Switch back to Chrome and reload index.html to see that the extra space below the logo is now gone.
8. Now let’s add space around the logo. Switch to main.css in your code editor.

9. Add the following new rule above the .logo rule:

   header {
      padding: 20px;
   }

10. Save main.css.

11. Return to the browser and reload index.html. The header looks better with space around the logo.

Styling the Footer

1. Switch to main.css in your code editor.

2. Let’s add a background color to the footer to help separate it from the rest of the page. At the bottom of the file, just below the main rule, add the following new rule:

   footer {
      background-color: #e9d8c8;
      padding: 20px;
   }

3. Save main.css.
4. Return to Chrome and reload index.html. We like how the footer is looking with the background color, but the copyright paragraph doesn’t look centered vertically. What’s going on? Let’s inspect.
5. CTRL–click (Mac) or Right–click (Windows) on the footer and choose Inspect.

6. In the Elements panel, select the <p> tag in the footer. You’ll see it highlighted in the browser and you should also see the p rule in the Styles tab of the DevTools window:

   

   Bottom margin is good for typical paragraphs (like those in the main section of the page), but not when we only have this one paragraph in the footer. Luckily descendant selectors allow us to target an element when it’s inside of another element. We want to style the p tags only inside the footer.

7. Return to main.css in your code editor.

8. Let’s remove the space below the copyright, and make it smaller while we’re at it. At the bottom of the file, just below the footer rule, add the following new rule:

   footer p {
      margin: 0;
      font-size: 14px;
   }

9. Save main.css.
10. Return to the browser and reload index.html. Now the footer and copyright text look better, and copyright text is vertically centered in the footer’s background color.

11. Keep the browser window open, but close the DevTools.

Setting Limits with an Outer-Wrapper & Max-Width

1. Resize your browser window as wide as it will go. This hero image looks good at 1280 pixels or less. If you make the window wider than 1280 pixels, the hero image starts to become pixelated. We could use a bigger image, but another option is to limit the width of the hero area.

   To control the overall width of the content on the page, we can wrap a <div> around all the content and then set limits to its width in the CSS.

2. Return to your code editor and switch to index.html.

3. Wrap a div tag around all the content of the document inside the body tag.

   TIP: If you’re using Visual Studio Code (and set up the wrap keystroke using the instructions in the Before You Begin section near the start of this book), you can wrap a tag around a selection by pressing Option–W (Mac) or ALT–W (Windows). Then type in the wrapper (div in this case) and hit Return (Mac) or Enter (Windows).

4. When you’re finished, check that you have an opening <div> (highlighted below in bold) just below the opening body tag.

   <body>
      <div>
         <header>

5. Check that you have a closing </div> (highlighted below in bold) just above the closing body tag.

   </footer>
      </div>
   </body>
   </html>

6. Give the new <div> an ID of wrapper:

   <body>
      <div id="wrapper">
         <header>
            <img src="images/logo.png" height="36" width="105" ALT="Hipstirred">

7. Save index.html.
8. Switch to main.css.

9. Below the p rule, add the following new rule:

   #wrapper {
      max-width: 1100px;
   }

10. Save main.css.
11. Return to the browser and reload index.html. Resize your browser to make it narrow and wide. You’ll see the content stop scaling up when you get to 1101 pixels or wider. Our max-width works, but the content isn’t centered.
12. Return to main.css in your code editor.

13. Add the following new properties to the #wrapper rule:

    #wrapper {
       max-width: 1100px;
       margin-right: auto;
       margin-left: auto;
    }

14. Save main.css.

15. Return to the browser and reload index.html. Now the hero does not get too wide, and when the window is 1101 pixels or wider, the hero area is centered within the page.

    The top part of the page looks, but scroll down to the footer. Although we’d like the copyright content to have a max-width, the background color would look nicer stretching edge-to-edge.

Setting an Inner-Wrapper

1. Return to your code editor and switch to index.html.

2. What we need to do is end the current wrapper’s </div> just after the </main> section and leave the footer out of the wrapper. Move the </div> as follows:

   </main>
      </div>
      <footer>
         <p>© Hipstirred LLC</p>
      </footer>
   </body>

3. Save the file, return to the browser and reload the page to see that the footer is no longer constrained.

   We’d still like to have the copyright align on the left with the Hipstirred logo. To accomplish this, we need to place a wrapper around the content inside of the footer.

4. Return to index.html in your code editor.

5. As shown in bold, wrap a <div> tag around the <p> inside the <footer> and give it an ID of wrapper:

   <footer>
      <div id="wrapper">
         <p>© Hipstirred LLC</p>
      </div>
   </footer>

6. Save the file, return to the browser and reload the page.

   This worked, but only because the browser is giving us a pass right now. We used the same ID twice, which goes against spec. We’re seeing a “silent failure”, which means that we have written invalid code, but the browser will try to guess what our intent was and handle it accordingly.

ID Selectors Vs. Class Selectors

IDs signify uniqueness. They are meant to be used just once, per element, per page. Although the browser fails “silently” right now, this issue can come back to cause us problems down the road. Since the class selector was created specifically to style multiple elements the same way, let’s use a class for wrapper instead of an ID.

1. Return to index.html in your code editor.

2. Scroll up to the first wrapper and edit the attribute as follows:

   <body>
      <div class="wrapper">
         <header>

3. Down in the footer, change id to class as well:

   <footer>
      <div class="wrapper">
         <p>© Hipstirred LLC</p>
      </div>
   </footer>

4. Save the file.
5. Switch to main.css.

6. Change #wrapper to .wrapper (which changes it from an ID selector to a class selector), so you end up with the following:

   . wrapper {
      max-width: 1100px;
      margin-right: auto;
      margin-left: auto;
   }

7. Save the file, return to the browser, and reload the page. If all goes well, you won’t see any change but you can bask in the glow of your valid HTML and CSS.

Real-World Widths

We set the max-width value to 1100 pixels to make it easy to see max-width in action, even if you are working with a smaller resolution. For real-world design, though, we recommend setting a max-width to a more standard resolution, like 1280 pixels. This gives these users the edge-to-edge look we desire but also caps off the content when it gets too wide for users who have a higher resolution.

1. Return to main.css in your code editor. We’ll set the max-width to be a more generous size.

2. Edit the value for the max-width property for .wrapper as follows:

   .wrapper {
      max-width: 1280 px;
      margin-right: auto;
      margin-left: auto;
   }

3. Save main.css.

4. Return to the browser and reload index.html. If your screen is 1280px wide or less, the hero image should fill the page. If your screen is wider than 1280px, test out the new max-width value. Nice.

   NOTE: We’re not saying you always have to limit the width of your hero images, but in case you do, we wanted to show you how.