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.
