6

I am wondering if it's possible to display two div elements in inverted order using only css. No html change or javascript code, just css.

I have the following html:

<div id="container" class="clearfix">
    <div id="right-sidebar">Right</div>
    <div id="left-sidebar">Left</div>
</div>

and this current css:

#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;
    float: left;
}

#right-sidebar {
    border: 2px solid green;
    float: right;
}

The result shows the right div above the left one. I'd like to swap them, showing the left one above the right one, maintaining the container properties (auto calculated height).

To explain it in different words, I'd like to achive using just CSS the same result I would obtain by swapping the two divs in the html code.

Is it even possible with only css? [I'm dreaming about a float: bottom property :)]

http://jsfiddle.net/mT7JJ/1/

1

7 Answers 7

6

According to this and many others, i am afraid you can not swap only with css, but I've found something that will help you in this situation and that is this

So this will be your edit on fiddle

#container {
 display: table; width: 200px; 
 border:1px red solid;
}
#left-sidebar {
 display: table-header-group;
}
#right-sidebar {
 display: table-footer-group;
}
2

The only think i can think about is relative/absolute position. But it will not be really efficient though

1

One modern solution, as has been comented, is flex layout.

Another tricky posibilitity is using transforms

webkit demo

I an just rotating the container upside down, and then rotaing the inner divs to make them look ok. It's done in the hover, to show the net effect. The hover is a little bit inestable due to the clearfix, but this is not relevant here.

#container:hover {
    -webkit-transform: rotateX(180deg);
}
#container:hover div {
    -webkit-transform: rotateX(180deg);
}

I enjoy answering a question that has been declared imposible :-)

0
0
<div id="container" class="clearfix">
    <div id="left-sidebar">Left</div>
    <div id="right-sidebar">Right</div>

</div>
#container {
    width: 200px;
    border: 2px solid blue;
    padding: 2px;
    margin: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#left-sidebar, #right-sidebar {
    width: 150px;
    padding: 2px;
}

#left-sidebar {
    border: 2px solid red;

}

#right-sidebar {
    border: 2px solid green;

}

check this left div above right div

5
  • thanks, but that's not what I'm looking for.. I'd like to see the "Left" div above the "Right" one Jul 3, 2013 at 18:43
  • @lorenzo.marcon check my edits.i don't know is this are you expecting?
    – sun
    Jul 3, 2013 at 18:49
  • erhm ok, but you changed the html :) I was wondering if this is possible just by changing the css.. Jul 3, 2013 at 18:52
  • I saw them, you also changed the html, which is not what I asked. Thanks anyway Jul 3, 2013 at 19:38
  • I'm deeply sorry, my fault. I was answering to raj, but you gave the answer that I need :) Jul 3, 2013 at 20:53
0

Using CSS only:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;

}

<div id="blockContainer">
 <div id="blockA">Block A</div>
 <div id="blockB">Block B</div>
 <div id="blockC">Block C</div>
</div>

http://jsfiddle.net/hLUHL/713/

0

no expert and old question but use case apply for me under specific conditions to anwser this question: "Swap div order using css only"

My answer is almost entirely based on Harry's answer here https://stackoverflow.com/a/31366853/3913379 (Original Answer v2) and tested nowadays (Chrome/FF) under the condition that the child divs are same size (use case is main Div contains TWO divs with link icons and text).

So to swap TWO divs left to right and vice versa using CSS only I used a css transform on X axis (transform: translateX ), like this:

<STYLE type="text/css">
      #Child1Div {transform: translateX(100%);}
      #Child2Div  {transform: translateX(-100%);}
</STYLE>


<div id="MotherDiv" >
    <div id="Child1Div">Context of child one</div>
    <div id="Child2Div">Content of child two</div>
</div>

So, note usage of percentages and negative values in one case, to attain basically "the swap". HTML structure is unchanged (and JS/JQuery listeners were unaffected, for example link's onClick(...) ) This may fail under some inherited special styles but simple case worked nicely for me.

Style can be applied in HEAD tag or inline on divs or also dynamically via JS (for example to swap two Icons/Images via a button click or something like that)

0

There are two ways to do that with css. Flex and Grid.

Flex:

#container {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   justify-content: flex-start;
   flex-direction: row-reverse;
 }
 

Grid:

#container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr))      
}
#left-sidebar {
  order 2
}
#right-sidebar {
  order 1
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.