CODEWITHSUNDEEP
cssfloatingsiblings
Alan A
Alan A

Reputation: 2551

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/

Upvotes: 1

Views: 226

Answers (3)

Josh from Qaribou
Josh from Qaribou

Reputation: 6908

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.

Upvotes: 2

Krone
Krone

Reputation: 43

What about using Javascript and AJAX (or Jquery) to change the contents of the div's on the fly depending on what content you want to be in them.

Thus even though the order is still A B C - A really has B's content now in it, or whatever content you want.

So you might do some javascript like this

<script>
target = document.getElementById('A');  // this assumes the target div has an ID of "A"
target.innerHTML = "whatever content you want to put in here"
</script>

Upvotes: 0

Leo
Leo

Reputation: 4428

Look into the flexbox model. You can reorder the elements there. See http://css-tricks.com/snippets/css/a-guide-to-flexbox/.

Upvotes: 0

Related Questions