html - Make text element wrap before div

Question

I have the following example set up: http://jsfiddle.net/Xj5cH/

<div id="box">
    <span id="text">This is some text. Hello World!</span>
    <div id="sidebar"></div>
</div>

#box {
    height:50px;
    width:200px;
    border:1px solid;
}

#text {
    font-size:16px;
}

#sidebar {
    height:100%;
    width:50px;
    float:right;
    background-color:yellow;
}

How would I get the text element to properly wrap before the sidebar div without explicitly setting its width?

Answer 1

Right floated elements should appear before left side elements in the HTML.

Updated Fiddle

<div id="box">
    <div id="sidebar"></div>
    <span id="text">This is some text. Hello World!</span>
</div>