Modulus Content Framework
(name is not fixed yet)

INFO: This is WIP ⸺ Work In Progress

Last updated: 2021-09-21

The intention of the MCF is to make working with typography and content on the Web a lot easier.

Sources worth mentioning

1. HTML Living Standard on WHATWG, which is the original source of the HTML spec
2. For our needs, especially the section: The elements of HTML
3. HTML elements reference on MDN
4. HTML Element Reference - By Category on W3Schools
5. XHTML Abstract Modules ⸺ 5.2. Core Modules on W3C as a historical reference

It is worth mentioning that the above resources all have slighltly different approaches to the categorization of HTML elements. From a practical (developer / development logic) perspective we believe that the MDN categorization has advantages over the others, but it is worth having them at hand nonetheless.

MCF is opinionated to a certain degree. We use what has worked for us in the best possible way through over two decades of HTML evolution.

MDN Categorization

1. Main root
2. Document metadata
3. Sectioning root
4. Content sectioning (related to our Structural module)
5. Text content
6. Inline text semantics (related to our Text Module)
7. Image and multimedia
8. Embedded content
9. SVG and MathML
10. Scripting
11. Demarcating edits
12. Table content (related to our Table Module)
13. Forms (related to our Forms Module)
14. Interactive elements
15. Web Components

MCF Categorization

Tip: Use the sidebar for an always accessible full index.

1. Color Palette
2. Structural Module
3. Text Module
4. List Module
5. Tables Module
6. Forms Module
7. Image Module
8. Object Module (with dl)

Czeck for more here: \\COSMOS\activesurface\mod-content-framework-master

The color palette

It is from both poits of view ⸺ the esthetical and the markup ⸺ a good idea to keep a projects color palette consistent and not too long. The below table helps in the unification of the colors on a page ⸺ especially when used in conjunction with a good coding programm that displays the full list of colors used in a given stylesheet document.

Modulus ⸻ Brand colors — Primary

--mod-black

#2a2a2a

--mod-white

#fff

--mod-orange

#ff6400

--mod-green

#4cff9a

Modulus ⸻ Brand colors — Secondary

--mod-gray

#888888

--mod-gray-semi

#ccc

--mod-gray-semilight

#ddd

--mod-gray-light

#f6f6f6

--mod-orange-light

#ffd8be

Modulus ⸻ Brand colors — Tertiary

--mod-brown

#413d3a

--mod-brown-semi

#7b7063

--mod-brown-light

#9f8f7d

--mod-green-semi

#77FFB2

--mod-green-light

#DBFFEB

--mod-pink

#ffb6f3

--mod-blue-light

#bfffff

Structural Module

It is very important to understand the difference between the Structural Module and the Text Module ⸺ as they are often being mixed up. As the name implies the Structural Module defines the structure of a document, while the Text Module only defines meaning of text fragments.

BASIC HTML
Tag           Description
-----------   -------------------------------------------
!DOCTYPE      Defines the document type
html          Defines an HTML document
head          Defines information about the document
title         Defines a title for the document
body          Defines the document's body
h1 to h6      Defines HTML headings
p             Defines a paragraph
br            Inserts a single line break
hr            Defines a thematic change in the content
-----------   -------------------------------------------

https://w3schools.com
	

address

blockquote

Following this first paragraph we will see blockquote in use.

Assertively deliver high-payoff partnerships through client-focused channels. Globally aggregate best-of-breed thinking with team building relationships.

And now another paragraph after it.

heading (h1 to h6)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with link

Heading 1 with link

Heading 2 with link

Heading 3 with link

Heading 4 with link

Heading 5 with link

Heading 6 with link

Very very long Headings

A very very long Heading 1 makes a line break. A very very long Heading 1 makes a line break.

A very very long Heading 2 makes a line break. A very very long Heading 2 makes a line break.

A very very long Heading 3 makes a line break. A very very long Heading 3 makes a line break.

A very very long Heading 4 makes a line break. A very very long Heading 4 makes a line break.

A very very long Heading 5 makes a line break. A very very long Heading 5 makes a line break.

A very very long Heading 6 makes a line break. A very very long Heading 6 makes a line break.

Very very long Headings with links

A very very long Heading 1 with link makes a line break. A very very long Heading 1 with link makes a line break.

A very very long Heading 2 with link makes a line break. A very very long Heading 2 with link makes a line break.

A very very long Heading 3 with link makes a line break. A very very long Heading 3 with link makes a line break.

A very very long Heading 4 with link makes a line break. A very very long Heading 4 with link makes a line break.

A very very long Heading 5 with link makes a line break. A very very long Heading 5 with link makes a line break.

A very very long Heading 6 with link makes a line break. A very very long Heading 6 with link makes a line break.

Headings and p

Heading 1 and a following paragraph

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

Heading 2 and a following paragraph

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

Heading 3 and a following paragraph

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

Heading 4 and a following paragraph

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

Heading 5 and a following paragraph

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

Heading 6 and a following paragraph

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

Headings and following definition list

Heading 1 and a following definition list

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Heading 2 and a following definition list

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Heading 3 and a following definition list

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Heading 4 and a following definition list

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Heading 5 and a following definition list

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Heading 6 and a following definition list

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Here is the definition term.

Here is the definition description.

Headings and following unordered list

Heading 1 and a following unordered list

• First position in the list
• Second position in the list
• Third position

Heading 2 and a following unordered list

• First position in the list
• Second position in the list
• Third position

Heading 3 and a following unordered list

• First position in the list
• Second position in the list
• Third position

Heading 4 and a following unordered list

• First position in the list
• Second position in the list
• Third position

Heading 5 and a following unordered list

• First position in the list
• Second position in the list
• Third position

Heading 6 and a following unordered list

• First position in the list
• Second position in the list
• Third position

Headings and following ordered list

Heading 1 and a following ordered list

1. First position in the list
2. Second position in the list
3. Third position

Heading 2 and a following ordered list

1. First position in the list
2. Second position in the list
3. Third position

Heading 3 and a following ordered list

1. First position in the list
2. Second position in the list
3. Third position

Heading 4 and a following ordered list

1. First position in the list
2. Second position in the list
3. Third position

Heading 5 and a following ordered list

1. First position in the list
2. Second position in the list
3. Third position

Heading 6 and a following ordered list

1. First position in the list
2. Second position in the list
3. Third position

Headings and following tables

Heading 1 and a following table

Heading 2 and a following table

Heading 3 and a following table

Heading 4 and a following table

Heading 5 and a following table

Heading 6 and a following table

Headings and following image

Heading 1 and a following image

Heading 2 and a following image

Heading 3 and a following image

Heading 4 and a following image

Heading 5 and a following image

Heading 6 and a following image

p

Examples of paragraphs

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks. A sample paragraph with several linebreaks.

pre

Following this first paragraph we will see pre in use.

A sample text.
What makes pre interesting is that all line breaks
in the code are preserved when rendered by the browser.
Here is another line.
	

And now another paragraph after it.

hr

Between this and the following p we have a hr

This is the next paragraph.

Text Module

It is very important to understand the difference between the Text Module and the Structural Module - as they are often mixed up. As the name implies the Text Module only defines meaning of text fragments, while the Structure Module defines the structure of a document.

abbr

The abbr tag defines the start of an abbreviation, like WWW. By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers. Here is an example of it within text: WWW. abbr is a better choice compared to similar acronym as it may be declared deprecated in XHTML 2.

cite

The cite element the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc).

Example

Here is the short hex value for white: #fff It is 3 characters shorter than the long value, which is: #ffffff

code

The code element defines computer code.

Example

Here is the short hex value for white: #fff It is 3 characters shorter than the long value, which is: #ffffff

dfn

The dfn element defines a definition term.

Example

An acronym is a word formed from the initial letters or groups of letters of words in a set phrase or series of words.

em

The em element renders as emphasized text. It can be used to substitute the i element - just because em seems to be more "semantic" than i, which just implies a form of visual rendering (italics).

Example

There must be a solution.

kbd

The kbd element defines keyboard text.

Example

The keyboard shortcut for opening the "Windows Start menu" is: Ctrl + Esc

q

The q element defines a quotation.

Example

All John said was I like quotations and than he suddenly went away.

samp

The samp element designates sample output from programs, scripts, etc.

Example

On starting, you will see the prompt $ .

span

The span element can be used for various purposes. It is commonly used to apply special styling trough CSS. In XHTML 2 it will probably also contribute to the edit module as it will be an element where to apply e.g. the "del" and "ins" attributes as those (now) tags become deprecated in XHTML 2.

Example

A span element without a special designation - e.g. through CSS - does simply nothing.

strong

The strong element renders strong emphasized text. It can be used to substitute the b element - just because strong seems to be more "semantic" than b, which just implies a form of visual rendering (bold).

Example

I really need a break now!

sub

The sub element indicates that its contents should be regarded as subscript.

Example

H₂O

sup

The sup element indicates that its contents should be regarded as superscript.

Example

x²

var

The var element defines a variable.

Example

The variable n defines any number in this calculation.

del

The del element defines delered text. It is very useful when combined with the ins element.

Example

I have owned 20 21 cars.

ins

The ins element defines inserted text. It is very useful when combined with the del element.

Example

I have owned 20 21 cars.

List Module

The List Module consists of the following elements

dl ⸻ Definition list

Below this sample paragraph is a definition list. This paragraph is important to show the margins before the list ⸺ which can be defined of course. Also we have a sample paragraph below the list to show the margin before the paragraph.

Here is the first definition term.

And here is the first definition description.

And the second definition description.

And the third. Yes, dl can have more than one dd.

The second definition term.

Astonishing definition description.

And the final third definition term.

Superb definition description.

The amazing definition description.

This is a sample paragraph below the list. As stated above its purpose is to show the margin after the list to the following paragraph. This margin can be styled of course.

ol ⸻ Ordered list

Below this sample paragraph is a ordered list. This paragraph is important to show the margins before the list ⸺ which can be defined of course. Also we have a sample paragraph below the list to show the margin before the paragraph.

1. First position in the list
2. Second position in the list
3. Third position
4. Forth position
   1. First nesteted position
   2. Second nesteted position
   3. Third nesteted position
   4. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks.
   5. Next position
   6. Next position
   7. Next position
      1. Second grade nested position.
      2. Second grade nested position.
      3. Second grade nested position again very long. Second grade nested position again very long. Second grade nested position again very long. Second grade nested position again very long. Second grade nested position again very long.
      4. Second grade nested position.
      5. Second grade nested position.
         1. Testing Supernesting
         2. Testing Supernesting
         3. Testing Supernesting
            1. Testing Supernesting
            2. Testing Supernesting
            3. Testing Supernesting
               1. Testing Supernesting
               2. Testing Supernesting
               3. Testing Supernesting
                  1. Testing Supernesting
                  2. Testing Supernesting
                  3. Testing Supernesting
                  4. Testing Supernesting
                  5. Testing Supernesting
               4. Testing Supernesting
               5. Testing Supernesting
            4. Testing Supernesting
            5. Testing Supernesting
         4. Testing Supernesting
         5. Testing Supernesting
      6. Second grade nested position.
   8. Next position
   9. Next position
5. Next position
6. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks.
7. A following position
8. And here is the last position

This is a sample paragraph below the list. As stated above its purpose is to show the margin after the list to the following paragraph. This margin can be styled of course.

ul ⸻ Unordered list

Below this sample paragraph is a unordered list. This paragraph is important to show the margins before the list ⸺ which can be defined of course. Also we have a sample paragraph below the list to show the margin before the paragraph.

• First position in the list
• Second position in the list
• Third position
• Forth position
  • First nesteted position
  • Second nesteted position
  • Third nesteted position
  • Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks.
  • Next position
  • Next position
  • Next position
    • Second grade nested position.
    • Second grade nested position.
    • Second grade nested position again very long. Second grade nested position again very long. Second grade nested position again very long. Second grade nested position again very long. Second grade nested position again very long.
    • Second grade nested position.
    • Second grade nested position.
      • Testing Supernesting
      • Testing Supernesting
      • Testing Supernesting
        • Testing Supernesting
        • Testing Supernesting
        • Testing Supernesting
          • Testing Supernesting
          • Testing Supernesting
          • Testing Supernesting
            • Testing Supernesting
            • Testing Supernesting
            • Testing Supernesting
            • Testing Supernesting
            • Testing Supernesting
          • Testing Supernesting
          • Testing Supernesting
        • Testing Supernesting
        • Testing Supernesting
      • Testing Supernesting
      • Testing Supernesting
    • Second grade nested position.
  • Next position
  • Next position
• Next position
• Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks. Next position is very very long and shuold have some linebreaks.
• A following position
• And here is the last position

This is a sample paragraph below the list. As stated above its purpose is to show the margin after the list to the following paragraph. This margin can be styled of course.

Unordered list with links

• Home
• News
• Articles
• Works
  • Art
  • Architecture
  • Design
• About
• Contact
• Special
• Shop

Tables Module

The Tables Module consists of the following elements

table ⸻ Simple table

Below this sample paragraph is a table. This paragraph is important to show the margins before the table - which can be defined of course. Also we habe a sample paragraph below the table to show the margin before the paragraph.

This is a sample paragraph below the table. As stated above its purpose is to show the margin after the table to the following paragraph. This margin can be styled of course.

Below this sample paragraph is a table. This paragraph is important to show the margins before the table - which can be defined of course. Also we habe a sample paragraph below the table to show the margin before the paragraph.

This is a sample paragraph below the table. As stated above its purpose is to show the margin after the table to the following paragraph. This margin can be styled of course.

Forms Module

The Forms Module consists of the following elements

Below this sample paragraph is a form. This paragraph is important to show the margins before the form - which can be defined of course. Also we habe a sample paragraph below the form to show the margin before the paragraph.

This is a sample paragraph below the form. As stated above its purpose is to show the margin after the form to the following paragraph. This margin can be styled of course.

Image Module

In the case of the Image Module we use the element table as a container for img and the underneath bylines. In the following Object Module we make use of dl instead. While table seems to be more reliable with different browsers its use seems to be questionable from the point of view of semantics.

Images with bylines (figure)

<p>A sample paragraph.</p>

<figure class="img-left">
    <img src="https://via.placeholder.com/120x120.gif" alt=""/>

    <figcaption>
        <strong>obj-left</strong>
        longer title longer title longer title longer title longer title
    </figcaption>

</figure>
	

Dunt lut aliquisl ipsusci bla feum zzriure minim num veros ex ex enim at, Volendrem irit lorem volore con henim et, quatetum dolor aliquisse eugiamet lam ipsum adiatis non elestrud essis et autate ero odio conullaore et adit in heniam, quisi tie delendi psustio estrud duisisl doluptat. Duis aut prat ipsum iure voloborem ea am ilis ad dolobore dolorpe rostissi. br
Lissi. Etue etueril laorem dipisl el eu feugue magnibh ectet, summy num doloreet praesequi ero enis nostrud tem dolor sum do consequi blan ut niamcon ummodio consed min hendipis nisi.

A new p starts. Ibh eugiat alis adiamco nsequip exer adio et ex ex et, sim dolendiam, commy nonulputem volenim accum alit vullan euguer iril euisl ut in henim nis nit aute elesequate elessecte minim dolorpe rostrud eugueraesed del del delit autem zzriusto odit lamcons equisl eugait aut landrercilit nostis at, sed min venis nulput eugiamet atue min velisit, quatuer adionse quatue magnis elis ercing ecte tat. Hereafter br
Lore te eui tetum aut augiam ipit la feu feum iureetum vendigna augiatue facilla ortisl ulla facipis modolent iriustio dolore dolor sim ipit nisci tatem in heniat lam dolenit inismod modiam verit, sum doloreet ad eum doloreetue magna feu feugait num num illan velis el utat iuscipi ssequat, quatums andigniam, vel ut ea augait ad modolore dolore magna acilla con hent landrero exer sit alisl ipismol orerat, core vel dit vel ut eu feugue volortie magnis nisl duis am quat.

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

Tum ipsum acip ero commy nos et, consequip erostrud dolorero od ea feu facipis dipit, si eum alis nullamet iusto odigna adio euis nos nullupt atumsan ut autetuer sit inci er acilis adignim exer aute minci eu facil incidunt irit niat. Obore do dolorperos erci ea atumsan henibh esequisit esed del dit, quis alissi. Unt volorem irit praesequat. Tat. Am zzrit nostrud magna cons nostrud tie dolore faciduisi et irit ut augiam duisi blam zzrit in ute vulla feuis doluptat loreet wisit luptat, conullan utatis aut luptat, sim in hent dunt lore magnim vel ute vel utat iuscillan ulluptat nit irit nullam, quisim nonsequat. Ommodiam quismod ipsustrud et irit alismolutat lorer sit alit vullam, quateconsequam, susto consecte do od dolorpero consequam do doleniam dunt laorperilit nonse velit, ver augait, commy nullutat, sisis nulputem nullandio et dit lore exer si.

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

Excepteur consectetur cillum amet commodo. Magna anim nostrud eu quis id nisi ullamco adipisicing minim est. Culpa non mollit eu cillum consectetur est Lorem magna sit consectetur dolore in. Eu tempor cillum deserunt amet tempor quis est incididunt nulla in. Voluptate cillum exercitation adipisicing ut quis culpa. Reprehenderit nulla Lorem consequat duis laborum pariatur sit duis exercitation magna sit consectetur dolore in. Eu tempor cillum deserunt amet tempor quis est eiusmod. Labore irure commodo voluptate ea eiusmod reprehenderit aliqua. Dolore et minim incididunt do exercitation amet cillum proident ex est in ad. Consequat cupidatat labore id et. Tempor sint labore esse consequat. Quis consectetur magna sit consectetur dolore in. Eu tempor cillum deserunt amet tempor quis est deserunt. Excepteur do fugiat excepteur cillum non aliquip aliqua mollit dolor veniam veniam cupidatat nostrud ex.

Object Module (with dl)

Because of inconsistent behaviour of browsers as of now, it seems, that the only successful way to use dl as a container for images with byline (or other objects) is to do two things (or both). Either limit the choice of image formats to a given selection and declare them in the CSS file or leave it and give the size to all dl as a property (e.g. style="width:100px") directly in the XHTML document. The problem is, that - sadly - IE does not recognize the display:table CSS-property. With it it would be no problem to let the dl behave like normal tables.

Images without bylines
(no surrounding tag)

<p>A sample paragraph.</p>
<img src="https://via.placeholder.com/120x120.gif" alt="" class="obj-left" />
<p>A sample paragraph.</p>
	

Dunt lut aliquisl ipsusci bla feum zzriure minim num veros ex ex enim at, Volendrem irit lorem volore con henim et, quatetum dolor aliquisse eugiamet lam ipsum adiatis non elestrud essis et autate ero odio conullaore et adit in heniam, quisi tie delendi psustio estrud duisisl doluptat. Duis aut prat ipsum iure voloborem ea am ilis ad dolobore dolorpe rostissi. Hereafter br
Lissi. Etue etueril laorem dipisl el eu feugue magnibh ectet, summy num doloreet praesequi ero enis nostrud tem dolor sum do consequi blan ut niamcon ummodio consed min hendipis nisi.

A new p starts. Ibh eugiat alis adiamco nsequip exer adio et ex ex et, sim dolendiam, commy nonulputem volenim accum alit vullan euguer iril euisl ut in henim nis nit aute elesequate elessecte minim dolorpe rostrud eugueraesed del del delit autem zzriusto odit lamcons equisl eugait aut landrercilit nostis at, sed min venis nulput eugiamet atue min velisit, quatuer adionse quatue magnis elis ercing ecte tat. Hereafter br
Lore te eui tetum aut augiam ipit la feu feum iureetum vendigna augiatue facilla ortisl ulla facipis modolent iriustio dolore dolor sim ipit nisci tatem in heniat lam dolenit inismod modiam verit, sum doloreet ad eum doloreetue magna feu feugait num num illan velis el utat iuscipi ssequat, quatums andigniam, vel ut ea augait ad modolore dolore magna acilla con hent landrero exer sit alisl ipismol orerat, core vel dit vel ut eu feugue volortie magnis nisl duis am quat.

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

Tum ipsum acip ero commy nos et, consequip erostrud dolorero od ea feu facipis dipit, si eum alis nullamet iusto odigna adio euis nos nullupt atumsan ut autetuer sit inci er acilis adignim exer aute minci eu facil incidunt irit niat. Obore do dolorperos erci ea atumsan henibh esequisit esed del dit, quis alissi. Unt volorem irit praesequat. Tat. Am zzrit nostrud magna cons nostrud tie dolore faciduisi et irit ut augiam duisi blam zzrit in ute vulla feuis doluptat loreet wisit luptat, conullan utatis aut luptat, sim in hent dunt lore magnim vel ute vel utat iuscillan ulluptat nit irit nullam, quisim nonsequat. Ommodiam quismod ipsustrud et irit alismolutat lorer sit alit vullam, quateconsequam, susto consecte do od dolorpero consequam do doleniam dunt laorperilit nonse velit, ver augait, commy nullutat, sisis nulputem nullandio et dit lore exer si.

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.

Objects and bylines without "width"

This way - without having to give the width - would be really very elegant, as one does not have to care about e.g. the pixels of the images. But sad as it is, IE (even IE7) does not recognise the display:table CSS property. And here comes the problem: when a byline is longer than the width of the image it does not wrap below it, instead it takes the whole width it needs without braking lines. FF for example does interpret the display:table property and the dl behaves like a table - wrapping longer lines below the image to its width.

<p>A sample paragraph.</p>

<dl class="obj-left">
<dt><img src="https://via.placeholder.com/120x120.gif" alt="" /></dt>
<dd><strong>obj-left</strong> longer title</dd>
</dl>

<p>A sample paragraph.</p>
	

Dunt lut aliquisl ipsusci bla feum zzriure minim num veros ex ex enim at, Volendrem irit lorem volore con henim et, quatetum dolor aliquisse eugiamet lam ipsum adiatis non elestrud essis et autate ero odio conullaore et adit in heniam, quisi tie delendi psustio estrud duisisl doluptat. Duis aut prat ipsum iure voloborem ea am ilis ad dolobore dolorpe rostissi. Hereafter br
Lissi. Etue etueril laorem dipisl el eu feugue magnibh ectet, summy num doloreet praesequi ero enis nostrud tem dolor sum do consequi blan ut niamcon ummodio consed min hendipis nisi.

obj-left longer title longer title longer title longer title longer title

A new pstarts. Ibh eugiat alis adiamco nsequip exer adio et ex ex et, sim dolendiam, commy nonulputem volenim accum alit vullan euguer iril euisl ut in henim nis nit aute elesequate elessecte minim dolorpe rostrud eugueraesed del del delit autem zzriusto odit lamcons equisl eugait aut landrercilit nostis at, sed min venis nulput eugiamet atue min velisit, quatuer adionse quatue magnis elis ercing ecte tat. Hereafter br
Lore te eui tetum aut augiam ipit la feu feum iureetum vendigna augiatue facilla ortisl ulla facipis modolent iriustio dolore dolor sim ipit nisci tatem in heniat lam dolenit inismod modiam verit, sum doloreet ad eum doloreetue magna feu feugait num num illan velis el utat iuscipi ssequat, quatums andigniam, vel ut ea augait ad modolore dolore magna acilla con hent landrero exer sit alisl ipismol orerat, core vel dit vel ut eu feugue volortie magnis nisl duis am quat.

obj-right

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

obj-left

Tum ipsum acip ero commy nos et, consequip erostrud dolorero od ea feu facipis dipit, si eum alis nullamet iusto odigna adio euis nos nullupt atumsan ut autetuer sit inci er acilis adignim exer aute minci eu facil incidunt irit niat. Obore do dolorperos erci ea atumsan henibh esequisit esed del dit, quis alissi. Unt volorem irit praesequat. Tat. Am zzrit nostrud magna cons nostrud tie dolore faciduisi et irit ut augiam duisi blam zzrit in ute vulla feuis doluptat loreet wisit luptat, conullan utatis aut luptat, sim in hent dunt lore magnim vel ute vel utat iuscillan ulluptat nit irit nullam, quisim nonsequat. Ommodiam quismod ipsustrud et irit alismolutat lorer sit alit vullam, quateconsequam, susto consecte do od dolorpero consequam do doleniam dunt laorperilit nonse velit, ver augait, commy nullutat, sisis nulputem nullandio et dit lore exer si.

obj-center

obj-center

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.

obj-center longer title longer title

img-center longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title

img-full longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.

Objects and bylines with "width"

As of now it seems, that this is the best way to gain control over objcts and their bylines. The examples above this section are left to show how the browsers react to the different codes.

		<p>A sample paragraph.</p>

		<dl class="obj-left" style="width:120px">
		<dt><img src="https://via.placeholder.com/120x120.gif" alt="" /></dt>
		<dd><strong>obj-left</strong> longer title</dd>
		</dl>

		<p>A sample paragraph.</p>
		

Dunt lut aliquisl ipsusci bla feum zzriure minim num veros ex ex enim at, Volendrem irit lorem volore con henim et, quatetum dolor aliquisse eugiamet lam ipsum adiatis non elestrud essis et autate ero odio conullaore et adit in heniam, quisi tie delendi psustio estrud duisisl doluptat. Duis aut prat ipsum iure voloborem ea am ilis ad dolobore dolorpe rostissi. Hereafter br
Lissi. Etue etueril laorem dipisl el eu feugue magnibh ectet, summy num doloreet praesequi ero enis nostrud tem dolor sum do consequi blan ut niamcon ummodio consed min hendipis nisi.

obj-left longer title longer title longer title longer title longer title

A new p starts. Ibh eugiat alis adiamco nsequip exer adio et ex ex et, sim dolendiam, commy nonulputem volenim accum alit vullan euguer iril euisl ut in henim nis nit aute elesequate elessecte minim dolorpe rostrud eugueraesed del del delit autem zzriusto odit lamcons equisl eugait aut landrercilit nostis at, sed min venis nulput eugiamet atue min velisit, quatuer adionse quatue magnis elis ercing ecte tat. Hereafter br
Lore te eui tetum aut augiam ipit la feu feum iureetum vendigna augiatue facilla ortisl ulla facipis modolent iriustio dolore dolor sim ipit nisci tatem in heniat lam dolenit inismod modiam verit, sum doloreet ad eum doloreetue magna feu feugait num num illan velis el utat iuscipi ssequat, quatums andigniam, vel ut ea augait ad modolore dolore magna acilla con hent landrero exer sit alisl ipismol orerat, core vel dit vel ut eu feugue volortie magnis nisl duis am quat.

obj-right

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

obj-left

Tum ipsum acip ero commy nos et, consequip erostrud dolorero od ea feu facipis dipit, si eum alis nullamet iusto odigna adio euis nos nullupt atumsan ut autetuer sit inci er acilis adignim exer aute minci eu facil incidunt irit niat. Obore do dolorperos erci ea atumsan henibh esequisit esed del dit, quis alissi. Unt volorem irit praesequat. Tat. Am zzrit nostrud magna cons nostrud tie dolore faciduisi et irit ut augiam duisi blam zzrit in ute vulla feuis doluptat loreet wisit luptat, conullan utatis aut luptat, sim in hent dunt lore magnim vel ute vel utat iuscillan ulluptat nit irit nullam, quisim nonsequat. Ommodiam quismod ipsustrud et irit alismolutat lorer sit alit vullam, quateconsequam, susto consecte do od dolorpero consequam do doleniam dunt laorperilit nonse velit, ver augait, commy nullutat, sisis nulputem nullandio et dit lore exer si.

obj-center

obj-center

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.

obj-center longer title longer title

img-center longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title

img-full longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title longer title

Magna at. Ut praesto exercil ullaor sed modolore delestie faccum illaorero commodi psustis modolorper sendionum nons adit lam, quatem ea cons enisl dolor aliquam alisim vent nos atum ipiscil laorem dio et del dignisit la facinim nonulput wismodolum dolorero euip euis augiametuero dolore magna facipsu scilit pratumsan eu feu faccum et praesse tisit volorem am, conulla consed tiscili ssequam etuerat.

obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left obj-left

Osto cortinibh eummy nostrud te mincip ea feugait accummy nulla consequat vel il inis am do ex etuero conse etuer sim iurem nullaoreet in henis nibh elenit ad deliquat lor sis non vel eumsandre dipisl duismol oborpero el il et er in eugait ipit illandre ming et, velit ipsum zzrit vulluptat. Tate dunt exeros nim vulput lut venisit ing etue tisi. At. An essent veliquam, si.