Search code examples
cssfloatingsiblings

Float a div before elder sibling

Is it possible to have a floated element floated before it's elder sibling?

For example imagine three floated divs:

A B C

I want them to appear as:

A C B

I don't want to change the html mark-up becuase this is a responsive design. At a particular break point I want the order of the floats and hence the layout to change.

I have been reading about :after and :before but I'm not sure if this will help me.

.myFloat{
    width:75px;
    height:75px;
    margin:10px;
    border:1pc solid #333;
    float:left;
}

Here is my fiddle: http://jsfiddle.net/ewfMT/

Solution

  • Enjoy! http://jsfiddle.net/ewfMT/1/

    .myFloat{
    width:75px;
    height:75px;
    margin:10px;
    border:1pc solid #333;
    float:left;
}
.myFloat:nth-child(2) {
    float:none;
    display:inline-block;
}

    A basic description of why this works: float:left will take an element and stack it to the left of your items, while display:inline-block will naturally flow left-to-right, but to the right of all float:left elements.