Implement this layout using CSS float:left and float:right, or using CSS margin-left and position:absolute?

Question

I want to place 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):

I prefer CSS instead of a table-based layout.

Annotations should be displayed before (to the left of) the heading, as shown above.

In the HTML, annotations should be located after the corresponding heading, e.g. as follows (because the information/contents associated with a topic are usually whatever is after the topic's heading):

<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>

There are (at least) two possibilities:

• This answer uses float:right, with float:left
• This answer uses margin-left, with position:absolute and left

Which of these (or any other answer) is the better way to implement this layout, and why?

Answer 1

Use the solution with floats. Absolute positioning should not be used here, because text is being positioned, and the layout is dependent upon the size of the text. If your user changes his browser to magnify the text-size, the layout will become distorted. You need to be especially conscious of this if you are designing pages for accessibility (consider using % instead of px for the size as well), but in general, use absolute positioning only when it is the only way to do what you want.

A great resource for understanding how to correctly use floats is this smashing magazine article. I bookmarked it a while back and I use it as a reference.

Answer 2

No need for position:absolute. float:left will work best for this situation. float:right is also not needed. This solution is cross browser compatible. It will work in all browsers including quirks mode. Let me know how this works for you or if you need any changes.

Check working example at http://jsfiddle.net/PyHGy/9

If HTML order is important to you where annotations must come after corresponding heading, then we need to add position:absolute to .statusContainer and then adjust the margin in .titleContainer. This is also a cross browser compatible solution.

Check working example at http://jsfiddle.net/PyHGy/8/