Learning Web App Development

by Semmy Purewal

p elements in layout section

page 66

18 May 2014

In the "Layouts with Floats" section in Chapter 3, there is an error with the HTML and CSS. In particular, the p elements that are contained in the nav section should not be styled as part of the float. To fix this, we can add a class to the floating element:

<body>
  <main>
    <nav>
      <p><a href="link1">link1</a></p>
      <p><a href="link2">link2</a></p>
      <p><a href="link3">link3</a></p>
      <p><a href="link4">link4</a></p>
    </nav>

    <p class="content">Lorem ipsum dolor sit amet, consectetur adip
       sed do eiusmod tempor incididunt ut labore et dolore magna a
       enim ad minim veniam, quis nostrud exercitation ullamco labo
       aliquip ex ea commodo consequat. Duis aute irure dolor in re
       in voluptate velit esse cillum dolore eu fugiat nulla pariat
    </p>
  </main>
</body>

And then, in the associated CSS, specify that the styling should only apply to the content paragraph.

main {
    width: 500px;
    margin: auto;
    background: gray;
    overflow: auto;
}

nav {
    width: 100px;
    float: right;
}

p.content {
    margin: 0; /* remove the default margin on p */
    padding: 10px;
    float: left;
    width: 380px; /* 400 - 2*10 = 380 */
}

Similar changes will apply to all CSS in this section.

Thanks to Marco Vaccari for discovering and reporting this issue!