A Page <div>ided - Complete, Concrete, Concise

The previous exercise was an attempt to structure and (roughly) centre webpage content.
In this example we use div for sectioning the content on the page and margin:auto to centre it.

An Example Using divs
div Source Code
Notes
span Challenges

An Example Using divs

You can see how the page I styled and structured using divs looks here.

div Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>A  Page &lt;Div&gt;ided</title>
    <meta charset="utf-8"  />

    <style>

      .main {
        font-family: sans-serif;
        box-sizing: border-box;
        width: 600px;
        margin: auto;
      }

      .header, .footer {
        text-align: center;
        padding: 16px 0;
      }

      .header {
        background-color: blue;
        color: white;
      }

      #title {
        font-size: 32px;
      }

      #subtitle {
        font-size: 24px;
      }

      .content {
        font-size: 16px;
        text-align: justify;
      }

      .footer {
        color: blue;
        font-size: 24px;
        background-color: yellow;
      }

    </style>

  </head>
  <body>

    <div class="main">
      <div class="header">
        <p id="title">A Page &lt;Div&gt;ided</p>
        <p id="subtitle">
          Handling HTML one &lt;div&gt; at a time
        </p>
      </div>

      <div class="content">
        <p>
          Quam stultum est aetatem disponere ne crastini
          quidem dominum! o quanta dementia est spes
          longas inchoantium: emam, aedificabo, credam,
          exigam, honores geram, tum deinde lassam et
          plenam senectutem in otium referam.
        </p>
        <p>Omnia, mihi crede, etiam
          felicibus dubia sunt; nihil sibi quisquam de
          futuro debet promittere; id quoque quod
          tenetur per manus exit et ipsam quam premimus
          horam casus incidit. Volvitur tempus rata
          quidem lege, sed per obscurum: quid autem ad
          me an naturae certum sit quod mihi incertumest?
        </p>
        <ol>
          <li>Stat quidem terminusnobis ubi illum
            inexorabilis fatorum necessitas fixit, sed
            nemo scit nostrumquam prope versetur a
            termino; sic itaque formemus animum tamquam
            ad extremaventum sit.
          </li>
          <li>Nihil differamus; cotidie cum vita paria
            faciamus.
          </li>
          <li>Maximum vitae vitium est quod inperfecta
            semper est, quod [in] aliquid ex illa
            differtur.
          </li>
          </li>Qui cotidie vitae suae summam manum
            inposuit non indiget tempore;ex hac autem
            indigentia timor nascitur et cupiditas futuri
            exedens animum. Nihil est miserius dubitatione
            venientium quorsus evadant; quantum sit illud
            quod restat aut quale sollicita mens
            inexplicabili formidine agitatur.
          </li>
        </ol>
      </div>

      <div class="footer">
        <p>Copyright 2018</p>
      </div>

    </div>

  </body>
</html>

Notes

Most of the content is the same as the previous example.
The webpage is sectioned into 4 parts:
1. a main div] which is used to contain and centre everything else on the page.
2. A header div which contains heading content that is common across all pages.
3. A content div which contains the page content.
4. A footer div which contains common content that would be common across all pages.
While classes were used for the main. header, content, and footer sections, IDs would have been a better option. Since there should only be one of each on the page.
The content is justified.
Common styling for the .header and .footer were gathered together. Individual .header and .footer styling were applied later. This could also have been done using addition classes. There are always many ways to do things, but the general guideline should be to try and minimize:
1. the number of duplications – if you find yourself creating lots of classes with the same styling information, perhaps you should consider gathering the styling information together. You could extract it into a common class, or into a common wrapper.
2. the number of specific styling classes you apply to each HTML element. While you can have a long chain of styling classes for an HTML element you should ensure that it is necessary.
The general goal is to make your pages easier to create and easy to maintain. Always ask yourself, “How much code would I have to change if all the styling is changed?” It is always a balance and something that comes with experience.

span Challenges

You were also asked how would you create the following span styles:

Underline a mistake in red?
Create a space for people to in?

It could be done with these classes:

.red-underline {
  border-bottom: 2px solid red;
}

.four-char-space {
  border-bottom: 2px solid black;
  width: 64px;
  display: inline-block;

}

The red underline should be obvious – simply apply a red border to the bottom of the span.
The space for 4 characters is probably not so obvious:

The width is set to 64px based on the assumption that the font size is 16px (I could have set it explicitly just to be sure). Perhaps it should have been made 96px to have additional padding on either side.
The display is set to inline-block because inline elements ignore any applied width or height values.
The width has to be set because you can’t insert a bunch of spaces. Remember that HTML automatically collapses all white space into a single whitespace character.

Contents

An Example Using divs

div Source Code

Notes

span Challenges