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.
