Example Page Where the Content is not Flush with the Left Side

There is no single right way to do the previous example webpage, so I will show you 3 different ways it could be done.

At the end of the previous tutorial, you were asked to code a page using HTML5 and CSS3 to create a page that looks something like this:

Header / Title

A whole bunch of content. You don’t need to go overboard. The goal is to practice and reinforce your knowledge, not get bored.

Design Assumptions
Method 1
1. Notes 1
Method 2
1. Notes 2
Method 3
1. Notes 3

Design Assumptions

This page is not responsive¹ and is coded for a specific resolution:

The examples are coded for a screen resolution of 1366×768 pixels.²
- If your browser window resolution is lower, the example content will appear right of centre. It may even be off the display and require scrolling to the right.
- If your browser window resolution is higher, the example content will appear left of centre.
- If your browser window resolution is 1366×768, then the example content will appear centred.
The content width is 566 pixels.³
- This leaves 800 pixels to be split between the left and right margin or 400px for the left and 400px for the right.
The font-size is set to 16px
The font-family is sans-serif.

Method 1

You can see this code in action here.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Web Page 1</title>
    <meta charset="utf-8"  />

    <style>

      #title {
        font-size: 32px;
      }

      .centre {
        text-align: center;
      }

      .content {
        font-family: sans-serif;
        font-size: 16px;
        width: 566px;
        margin-left: 400px;
        box-sizing: border-box;
      }

      #footer {
        color: blue;
        font-size: 24px;
        padding: 0px 16px;
      }

    </style>

  </head>
  <body>

    <p id="title" class="centre content">Web Page Sample #1</p>

    <p class="content">
      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 class="content">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 class="content">
      <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>
  <p id="footer" class="content centre ">
    Copyright 2018
  </p>
  </body>
</html>

Notes 1

A .content class was created to apply the necessary left margin and content width to each HTML element that needs to be in the “content zone” on the page.
While this works, it is a bit clunky because the class has to be applied to every single HTML element that goes in that content zone.
A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
The #header and #footer were given some individual styling.
Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
The box-sizing property was set to border-box because ordered lists have padding on the left side (this is where the numbers go), which would make the width of the ol element as wide as width of the content + the width of any padding + the width of any border – which means it would be wider than the specified 566px. Of course, the ol element could be styled to have a narrower content width to compensate for the internal padding.⁴

Method 2

You can see this code in action here.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Web Page 2</title>
    <meta charset="utf-8"  />

    <style>

      #title {
        font-size: 32px;
      }

      .centre {
        text-align: center;
      }

      h1, p, ol {
        font-family: sans-serif;
        font-size: 16px;
        width: 566px;
        margin-left: 400px;
        box-sizing: border-box;
      }

      #footer {
        color: blue;
        font-size: 24px;
        padding: 0px 16px;
      }

    </style>

  </head>
  <body>

    <p id="title" class="centre ">Web Page Sample #2</p>

    <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>
  <p id="footer" class="centre ">
    Copyright 2018
  </p>
  </body>
</html>

Notes 2

This method avoids using a .content class and directly styles the HTML styles elements so they have the necessary offset (margin-left) and content width.
This saves applying a .content class to every element.
It has the disadvantage that if you try to nest one of the styled elements inside another (for example, a p inside the ol), you would need to apply a class to clear the margin-left property.
A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
The #header and #footer were given some individual styling.
Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
The box-sizing property was set to border-box because ordered lists have padding on the left side (this is where the numbers go), which would make the width of the ol element as wide as width of the content + the width of any padding + the width of any border – which means it would be wider than the specified 566px. Of course, the ol element could be styled to have a narrower content width to compensate for the internal padding.

Method 3

You can see this code in action here.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Web Page 3</title>
    <meta charset="utf-8"  />

    <style>

      body {
        font-family: sans-serif;
        font-size: 16px;
        width: 566px;
        margin-left: 400px;
        box-sizing: border-box;
      }

      #title {
        font-size: 32px;
      }

      .centre {
        text-align: center;
      }

      #footer {
        color: blue;
        font-size: 24px;
        padding: 0px 16px;
      }

    </style>

  </head>
  <body>

    <p id="title" class="centre ">Web Page Sample #3</p>

    <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>
  <p id="footer" class="centre ">
    Copyright 2018
  </p>
  </body>
</html>

Notes 3

This method styles the body element to have the appropriate left margin and necessary width.
Since the body element acts as a container for all the other elements, it is not necessary to style their width or left margin.
It avoids a lot of problems of the first two methods.
It is the preferred method of styling.⁵
A .centre class is applied to those elements needing centering. Centering is a special behaviour and should be handled on a case by case basis.
The header and footer were each given an ID. This makes sense, since there should only be one header and one footer per page.
The #header and #footer were given some individual styling.
Only a left margin was applied since the content normally aligns on the left side. Applying a margin of 400px shifted the content to the center.
The box-sizing property was set to border-box because I prefer to work with HTML element sizes rather than content sizes. Nevertheless, it wasn’t necessary. Unlike the previous two examples, the ol element would be constrained to the size of the body containing it.

A responsive page is one that adapts to different web browser sizes and resolutions. Thsi will be covered in future tutorials.↩
As of April 2018, this is the most common screen resolution of visitors to this site (~30%). A future tutorial will show how to get the reported screen resolution and browser window size. Be warned, User-Agents (browsers) may lie, so it is bad programming to trust what the browser tells you.↩
There is a lot fo debate as to what the optimal line length is. Guidelines recommend between 45 and 75 characters per line.↩
Consider the following example, in which the ol tag is given a background colour of orange and the li tags are given a background colour of yellow. You can see the orange padding to the left of the list items. in the content-box model, the padding is not part of the width of the element. The padding is there so the numbers have a space to go:
1. Item 1
2. Another item
↩
While the body can be styled, usually it is not. The next tutorial will look at various HTML container elements that are used for layout.↩

Contents

Design Assumptions

Method 1

Notes 1

Method 2

Notes 2

Method 3

Notes 3