Edit: answer to this question is easy, a simple example of float left and float right.
I'd like to float some annotations to the left of a topic using HTML and
CSS, for example the 'status' and 'author' annotations shown in the following mockup/image:
For semantic reasons, perhaps:
I prefer to use
CSS instead of a table-based layout
In the HTML, the status should appear after the corresponding heading
For example:
<h1>This is a section title</h1>
<div class="status">approved</div>
<div class="author">chris</div>
<p>This is some text. Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<h1>Different section title</h1>
<div class="status">rejected</div>
<p>Lorem ipsum.</p>
I'd like the annotations to be after the heading in the HTML, because everything associated with (i.e. the contents of) a topic is usually whatever is after the topic's heading.
However I'd like the annotations to be displayed before (to the left of) the heading, as illustrated above.
Is this possible? What is the most semantic HTML, and corresponding
CSS, that will render as shown above? Would you recommend a table-based layout instead? Even if that means putting the headings in a table cell?
It may not be possible; this answer suggests it isn't possible ... but I don't know
CSS well enough to say that for sure.
