Question

So, I have this, when the screen is resized, the floater should move to the left. Simple enough – but I want it below the content element – any easy way to accomplish that?

Since DOM order can’t change without javascript – is there a way to have it display the same (floater is floated to the right), but have the inner elements in different order?

The floater cannot have a set height, only width.

I tried doing it position absolute and change the DOM order, it mostly worked, but then the floater has to be lower (in px) than the content div, which is not the case for me, it gets over the content below.

Any ideas?

.floater
{
    float: right; 
    width: 300px;
    background-color: gray;
}
@media screen and (max-width: 650px) {
    .floater
    {
        float: left;
    }
}

<div>
    <div class="floater"></div>
    <div>
        content content content content content content content content content content content content content content content content content content content content 
    </div>
</div>

Answer 1

Update

Given your comments, we are more or less back to basics now 🙂

We’re setting the main content to take up the entire width but leave 300px on the right side with margin. Width defaults to auto and results in a liquidy feel when resized above the @media treshold; I’m going to float it left too to make it play nicely with the next column:

.content-main {float:left; margin-right:300px;}

Now, for the sidebar. We know that it’s 300px wide, and we also know that there is that much space available right next to the main content. That area, however, is taken up by the main content’s margin, effectively “pushing” the sidebar down. We’ll just handle it with a negative margin:

.content-secondary {float: left; width: 300px; margin-left:-300px;}

Because of the way dimensions worked out for us so far, it doesn’t actually matter (for this scenario at least) whether the sidebar is floated left or right. Personally I’d stick with “stacking” it in one direction which would be of benefit if you were to add yet another column.

Updated version here: http://jsfiddle.net/6VpTR/76/

Original Answer

Note that in your original code the right column would interfere with the main content because of the manner in which floating elements interact with non-floating ones. I’d strongly suggest looking into using an existing framework where the kinks have been worked out maybe cssgrid.net or 960.gs

That being said, see this fiddle here: http://jsfiddle.net/6VpTR/

As you can see I’m strongly in favour of semantic class names, and your original concern gets addressed by some html restructuring as well as creative use of floating and margins. Gutters should be added if you do not go with a pre-defined grid framework.