Question

How can I keep my red box on top line when the center div has a very wide content?
When The centered div has much content, the red div goes to another line.
Do you know why this occurs?

Take a look at my code:
http://jsfiddle.net/5dC6T/3/

Answer 1

The issue is in the way that you’ve ordered your <div> elements. Try:

<div>
    <div class="red-box"></div>
    <img class="photo" alt="" />
    <span>Name</span>
    <span>Data</span>
    <span>City</span>
</div>

CSS:

/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }

I’ve made these modifications to your current code: http://jsfiddle.net/Wexcode/38qYS/