Best way to flow content out of the body - css

Question

I'm working on a blog layout, where some info (blue box) is taken out from the post's body like this:
http://jsfiddle.net/rhr96/
What is the best of doing that?
Currently I'm doing:
position: absolute;
margin-left: negative value;
to flow the blue box to the left.
But I could also do:
position: relative;
float: left;
right: some px;
Any of these considered better? Or are there any other method?

Answer 1

Short Answer: POSITION ABSOLUTE
Reason: Designers use position: absolute because that is the right way to take out the element from the normal document flow, using float: left; wont take out the blue box out of the document flow...
Edit: Just understood what you actually wanted, here I've made a new 1, you can check it out..
Demo
HTML
<div class="container">
<div class="block">1</div>
<div class="content">This is a question</div>
</div>
CSS
.container {
height: 200px;
width: 500px;
border: 1px solid #eeeeee;
margin: 30px;
position: relative;
font-family: Arial;
}
.block {
position: absolute;
height: 80px;
width: 60px;
background-color: #eeeeee;
top: 10px;
left: 10px;
font-size: 36px;
text-align: center;
}
.content {
width: 410px;
float: right;
margin: 10px;
font-size: 18px;
}

Answer 2

I think the best way of doing this, may actually be this (well, I say best, I guess that's a matter of opinion in most cases)
HTML:
<div class="container">
<div class="outside">
hi
</div>
<div class="inside">
<p>Blah blah blah</p>
</div>
</div>
CSS:
.container { margin: 20px auto; width: 400px; }
.outside { background: #d8d8d8; float: left; margin: 0 5px 0 0; padding: 5px; }
.inside { background: #000; color: #fff; margin: 5px 0; overflow: hidden; }
Obviously you can repeat this multiple times on the same page (as I imagine you may if this is for blog posts)
EDIT: My answer uses floats to take the element out of the normal flow, the use of overflow: hidden on the content means that it doesn't wrap underneath the floated element.
(If you don't know much about overflow I'd suggest reading about it, it can be useful for all sorts of things, e.g. float clearing)