CSS - fluid design, how to correctly position right floats below the opposing element?

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.

Answer 2

New Answer (works, but with one major caveat)

This new answer works great (IE9, Firefox tested [IE8 renders but does not recognized @media switch]), except it requires you know the height of the right column (the column can be whatever height, but it needs to be known). It does reverse the DOM order within the wrapper. I realize the height issue may be a problem for you, Madd0g (I'm not sure if by "cannot have a set height" also means you do not know the height of any particular usage), but this solution could work for others, so I decided to post it anyway.

HTML

<div class="wrapper">
    <div class="content-main">Main Content</div>
    <div class="content-secondary">Right column</div>
</div>
<div>Content below</div>

CSS

.wrapper {
    padding-right: 300px;
}

.content-secondary {
    float: right;
    width: 300px;
    background-color: gray;
    margin-right: -300px;
    margin-left: 0;
}

.content-main {
    float:left;
    background:orange;
    min-width: 100%;
    margin-right: -300px;
}

.content-main:before {
    content: '';
    width: 300px;
    float: right;
    margin-bottom: 1em; /*this needs to be set to height of right column */
}

.wrapper + div {
    clear: both;
}

@media screen and (max-width: 650px) {
    .content-main, .content-secondary
    {
        float:none;
        margin: 0;
    }

    .content-main:before {
        display: none;
    }

    .wrapper {
        padding-right: 0;
    }
}

Original Answer (works if no content below the wrapper)

Based on your comment to o.v., I think what you want is this:

HTML

<div class="wrapper">
    <div class="content-secondary">Right column</div>
    <div class="content-main">Main Content</div>
</div>

CSS

.wrapper {
    position: relative;
}

.content-secondary
{
    float: right;
    width: 300px;
    background-color: gray;
}

.content-main
{
    background:orange;
}

@media screen and (max-width: 650px) {
    .content-secondary {
        float:none;
        position: absolute;
        top: 100%;
    }
}

Answer 3

This works for me, atleast in Firefox...you just need another <div>

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

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