Working on a mobile version of a blog, and I am trying to achieve this layout for this content.
I can hack it or I could use a table. But I would like to know the best practices in CSS on how to best achieve this. A few challenges present themselves. I am working in Jekyll, so the article is written in markdown. I followed the instructions on daringfireball.net/projects/markdown/basics and put this together
* Example 1: A BruxZir bridge has 3 mm high x 3 mm wide connectors.
3 mm2 x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load
in the oral environment, according to the Rule of 27.
* Example 2: A BruxZir bridge has 4 mm high x 2 mm wide connectors.
4 mm2 x 2 mm = 4x4x2 = 32. This is an even better outcome.
* Example 3: A BruxZir bridge has 2 mm high x 4 mm wide connectors.
2 mm2 x 4 mm = 2x2x4=16. This outcome of only 16 is insufficient.
Which produces
Because this is such a unique post, I am considering not including it in the main css file. Even code inline if I have to. I read a similar question at Stack Overflow - For div to extend full height. But the code seems verbose.
So I resorted to making this a table. The pure markdown options did not seem feasible and Darling Fireball said the following
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
The only restrictions are that block-level HTML elements — e.g.<div>, <table>, <pre>, <p>,etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted)tags around HTML block-level tags.
For example, to add an HTML table to a Markdown article:
and then a table was done in html. So with that cue, I made the following in html
<table class="zirconiaExample">
<tr>
<th scope="row">Example 1:</th>
<td>
A BruxZir bridge has 3 mm high x 3 mm wide connectors.
<br>
3 mm2 x 3 mm = 3x3x3 = 27. This bridge will be able to carry a proportional load
in the oral environment, according to the Rule of 27.
</td>
</tr>
<tr>
<th scope="row">Example 2:</th>
<td>
A BruxZir bridge has 4 mm high x 2 mm wide connectors.
<br>
4 mm2 x 2 mm = 4x4x2 = 32. This is an even better outcome.
</td>
</tr>
<tr>
<th scope="row">Example 3:</th>
<td>
A BruxZir bridge has 2 mm high x 4 mm wide connectors.
<br>
2 mm2 x 4 mm = 2x2x4=16. This outcome of only 16 is insufficient.
</td>
</tr>
</table>
Which produced this
But that number should not be underneath the "example" and because these classes are so unique. I am writing custom classes and including them as below in the .markdown file
<style>
table.zirconiaExample th {
display: table-cell;
vertical-align: top;
}
</style>
Should I keep hacking away at this specific style that may not be reusable? or is there a better practice?
