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:

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

    <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

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!