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 :)]